"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import Link from "next/link";
import { HelpCircle } from "lucide-react";

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

  const handleNavClick = (id: string) => {
    if (id === "/") {
      window.location.href = "/";
    } else if (id.startsWith("/")) {
      window.location.href = id;
    } else if (id.startsWith("http")) {
      window.open(id, "_blank");
    } else {
      const element = document.getElementById(id);
      if (element) {
        element.scrollIntoView({ behavior: "smooth" });
      }
    }
  };

  const handleContactSubmit = (data: Record<string, string>) => {
    console.log("Contact form submitted:", data);
    alert("Thank you for reaching out! We'll get back to you soon.");
  };

  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="mediumSmall"
      sizing="mediumLargeSizeMediumTitles"
      background="circleGradient"
      cardStyle="gradient-radial"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          navItems={navItems}
          button={{ text: "Shop Now", href: "/shop" }}
          brandName="StyleHub"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Get in Touch"
          description="Have questions or feedback? We'd love to hear from you. Contact our team and we'll get back to you as soon as possible."
          inputs={[
            { name: "name", type: "text", placeholder: "Your Name", required: true },
            { name: "email", type: "email", placeholder: "Email Address", required: true },
            { name: "subject", type: "text", placeholder: "Subject", required: true },
          ]}
          textarea={{
            name: "message",            placeholder: "Tell us how we can help...",            rows: 5,
            required: true,
          }}
          useInvertedBackground={false}
          mediaPosition="right"
          imageSrc="http://img.b2bpic.net/free-photo/sales-assistant-being-employed-customer-care-support-job-working-telemarketing-call-center-helpdesk-female-receptionist-with-helpline-service-helping-clients-remote-communication_482257-43021.jpg"
          imageAlt="Contact support"
          mediaAnimation="slide-up"
          buttonText="Send Message"
          onSubmit={handleContactSubmit}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Frequently Asked Questions"
          description="Find answers to common questions about shopping, shipping, and returns at StyleHub"
          tag="Help & Support"
          tagIcon={HelpCircle}
          textboxLayout="default"
          useInvertedBackground={false}
          mediaAnimation="slide-up"
          faqsAnimation="slide-up"
          mediaPosition="left"
          imageSrc="http://img.b2bpic.net/free-photo/sales-assistant-being-employed-customer-care-support-job-working-telemarketing-call-center-helpdesk-female-receptionist-with-helpline-service-helping-clients-remote-communication_482257-43021.jpg"
          imageAlt="Customer support and help"
          faqs={[
            {
              id: "1",              title: "What is your return policy?",              content: "We offer a 30-day money-back guarantee on all items. If you're not completely satisfied with your purchase, simply return it in original condition for a full refund or exchange."},
            {
              id: "2",              title: "How long does shipping take?",              content: "Standard shipping typically takes 5-7 business days. We also offer express shipping options (2-3 business days) for an additional fee. All orders include tracking information."},
            {
              id: "3",              title: "Do you offer international shipping?",              content: "Yes! We ship to over 150 countries worldwide. International shipping times vary by location but typically take 10-21 business days. Import duties may apply depending on your country."},
            {
              id: "4",              title: "How do I care for my StyleHub items?",              content: "Each item comes with detailed care instructions. We recommend following the label instructions for best results. Most of our pieces are machine washable and designed to maintain their quality through many wears."},
            {
              id: "5",              title: "Are your products sustainable?",              content: "We're committed to sustainability! We use eco-friendly materials, ethical manufacturing practices, and sustainable packaging. Learn more about our environmental initiatives on our sustainability page."},
            {
              id: "6",              title: "What payment methods do you accept?",              content: "We accept all major credit cards, PayPal, Apple Pay, Google Pay, and various local payment methods depending on your country. All transactions are secure and encrypted."},
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="StyleHub"
          leftLink={{ text: "Privacy Policy", href: "#privacy" }}
          rightLink={{ text: "Terms of Service", href: "#terms" }}
        />
      </div>
    </ThemeProvider>
  );
}