"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FooterMedia from '@/components/sections/footer/FooterMedia';

export default function ContactPage() {
  const navItems = [
    { name: "Home", id: "/" },
    { name: "Shop", id: "/shop" },
    { name: "Men's", id: "/men" },
    { name: "Women's", id: "/women" },
    { name: "Accessories", id: "/accessories" },
    { name: "Drops", id: "/seasonal-drops" },
    { name: "About", id: "/about" },
    { name: "Contact", id: "/contact" }
  ];

  return (
    <ThemeProvider
        defaultButtonVariant="shift-hover"
        defaultTextAnimation="entrance-slide"
        borderRadius="soft"
        contentWidth="compact"
        sizing="mediumLargeSizeLargeTitles"
        background="noise"
        cardStyle="gradient-bordered"
        primaryButtonStyle="radial-glow"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="light"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarStyleFullscreen
            navItems={navItems}
            logoSrc="http://img.b2bpic.net/free-vector/flat-design-beach-club-logo-template_23-2149496426.jpg"
            logoAlt="Shark Wave logo"
            brandName="Shark Wave"
            bottomLeftText="Luxury Streetwear"
            bottomRightText="Premium Style, Affordable Price."
            button={{
              text: "Account", href: "/account" }}
          />
        </div>

        <div id="contact-us" data-section="contact-us">
          <ContactSplit
            useInvertedBackground={false}
            background={{
              variant: "plain" }}
            tag="Get in Touch"
            title="Connect with Shark Wave"
            description="Whether you have a question about your order, want to collaborate, or just want to share your style, our team is here to help. Join our newsletter for exclusive drops."
            imageSrc="http://img.b2bpic.net/free-photo/full-shot-punk-woman-posing_23-2149267430.jpg"
            imageAlt="Dark fashion studio interior"
            mediaAnimation="slide-up"
            mediaPosition="right"
            inputPlaceholder="Enter your email"
            buttonText="Subscribe to Newsletter"
            termsText="By clicking Subscribe, you agree to receive marketing emails from Shark Wave."
            onSubmit={(email: string) => console.log(email)}
          />
        </div>

        <div id="faq" data-section="faq">
          <FaqSplitMedia
            textboxLayout="default"
            useInvertedBackground={false}
            faqs={[
              {id: "faq1", title: "What is your shipping policy?", content: "We offer worldwide shipping with various options from standard to express delivery. Shipping costs and estimated times are calculated at checkout based on your location."
              },
              {id: "faq2", title: "How do I make a return or exchange?", content: "Returns and exchanges are accepted within 30 days of purchase, provided the items are in their original condition with tags attached. Please visit our Returns Center on the website to initiate the process."
              },
              {id: "faq3", title: "What payment methods do you accept?", content: "We accept all major credit cards (Visa, Mastercard, Amex), PayPal, Apple Pay, and Google Pay for secure and convenient transactions."
              },
              {id: "faq4", title: "How do I find my size?", content: "Each product page features a detailed size guide to help you choose the perfect fit. We recommend comparing your measurements to our guide for accuracy."
              }
            ]}
            imageSrc="http://img.b2bpic.net/free-photo/model-career-kit-still-life_23-2150229776.jpg"
            imageAlt="Clothing items neatly folded"
            mediaAnimation="slide-up"
            mediaPosition="left"
            title="Your Questions, Answered"
            description="Find quick answers to our most common inquiries regarding orders, shipping, returns, and product care."
            faqsAnimation="slide-up"
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterMedia
            imageSrc="http://img.b2bpic.net/free-photo/beach-background-with-clam-shells-remixed-from-artworks-by-augustus-addison-gould_53876-104879.jpg"
            imageAlt="Stylized ocean wave with subtle shark fin"
            logoText="Shark Wave"
            columns={[
              {
                title: "Shop", items: [
                  {label: "All Products", href: "/shop"},
                  {label: "Men's Collection", href: "/men"},
                  {label: "Women's Collection", href: "/women"},
                  {label: "Accessories", href: "/accessories"},
                  {label: "Seasonal Drops", href: "/seasonal-drops"}
                ]
              },
              {
                title: "Company", items: [
                  {label: "About Us", href: "/about"},
                  {label: "Contact Us", href: "/contact"},
                  {label: "Blog", href: "/seasonal-drops"},
                  {label: "Careers", href: "#"}
                ]
              },
              {
                title: "Support", items: [
                  {label: "FAQ", href: "/contact#faq"},
                  {label: "Shipping & Returns", href: "#"},
                  {label: "Order Tracking", href: "#"},
                  {label: "Privacy Policy", href: "#"},
                  {label: "Terms of Service", href: "#"}
                ]
              },
              {
                title: "Social", items: [
                  {label: "Instagram", href: "https://instagram.com/sharkwave"},
                  {label: "TikTok", href: "https://tiktok.com/@sharkwave"},
                  {label: "Facebook", href: "https://facebook.com/sharkwave"},
                  {label: "Twitter", href: "https://twitter.com/sharkwave"}
                ]
              }
            ]}
            copyrightText="© 2024 Shark Wave. All rights reserved."
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
