4c454f8a-200b-42ef-841d-ca2fbe9bd7ec/src/app/contact/page.tsx

"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
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";

export default function ContactPage() {
  const navItems = [
    { name: "Home", id: "home" },
    { name: "Custom Orders", id: "custom" },
    { name: "Shop", id: "shop" },
    { name: "Contact", id: "contact" },
  ];

  const handleContactSubmit = (data: Record<string, string>) => {
    console.log("Contact form submitted:", data);
  };

  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="small"
      sizing="largeSmall"
      background="blurBottom"
      cardStyle="solid"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple brandName="StyleCraft" navItems={navItems} />
      </div>

      <div id="hero-contact" data-section="hero-contact" className="mx-auto px-4 md:px-6">
        <HeroBillboardGallery
          title="Get in Touch with StyleCraft"
          description="Have questions about custom orders, ready-made items, or services? We're here to help. Reach out and let's create something beautiful together."
          background={{ variant: "animated-grid" }}
          tag="Contact Us"
          tagAnimation="slide-up"
          buttons={[
            {
              text: "Contact Form Below",
              href: "#contact-form",
            },
            {
              text: "Visit Our Shop",
              href: "/shop",
            },
          ]}
          buttonAnimation="slide-up"
          mediaItems={[
            {
              imageSrc: "http://img.b2bpic.net/free-photo/woman-showing-dress_23-2147688400.jpg?_wi=3",
              imageAlt: "StyleCraft team showcase",
            },
            {
              imageSrc: "http://img.b2bpic.net/free-photo/tools-sewing-clothes-woman-glasses-seamstress-with-centimeter-clothes_1157-46468.jpg?_wi=3",
              imageAlt: "Professional tailoring studio",
            },
            {
              imageSrc: "http://img.b2bpic.net/free-photo/personal-shopper-office-with-client-showing-pants_23-2148929564.jpg?_wi=3",
              imageAlt: "Personal styling consultation",
            },
          ]}
          mediaAnimation="slide-up"
          ariaLabel="Contact page hero section"
        />
      </div>

      <div id="contact-form" data-section="contact-form" className="mx-auto px-4 md:px-6">
        <ContactSplitForm
          title="Get in Touch"
          description="Have questions about custom orders or ready to book a consultation? We'd love to hear from you."
          inputs={[
            {
              name: "name",
              type: "text",
              placeholder: "Your Name",
              required: true,
            },
            {
              name: "email",
              type: "email",
              placeholder: "Your Email",
              required: true,
            },
            {
              name: "phone",
              type: "tel",
              placeholder: "Your Phone Number",
              required: true,
            },
          ]}
          textarea={{
            name: "message",
            placeholder: "Tell us about your custom order idea or inquiry...",
            rows: 5,
            required: true,
          }}
          useInvertedBackground={false}
          mediaAnimation="slide-up"
          mediaPosition="right"
          buttonText="Send Message"
          onSubmit={handleContactSubmit}
          ariaLabel="Contact form section"
        />
      </div>

      <div id="contact-faq" data-section="contact-faq" className="mx-auto px-4 md:px-6">
        <FaqSplitMedia
          title="Contact & Support"
          description="Find answers to common questions about reaching us, our location, and how we can serve you."
          faqs={[
            {
              id: "1",
              title: "What are your business hours?",
              content: "We're open Monday-Saturday, 10am-6pm. Sunday hours by appointment only. Call ahead to schedule a consultation.",
            },
            {
              id: "2",
              title: "Where is your physical location?",
              content: "StyleCraft is located at 456 Fashion Avenue, Downtown Design District. Visit us for in-person fittings and consultations.",
            },
            {
              id: "3",
              title: "How can I book a consultation?",
              content: "Use the contact form above or call us at (555) 123-4567. Virtual consultations are also available.",
            },
            {
              id: "4",
              title: "What payment methods do you accept?",
              content: "We accept all major credit cards, PayPal, and bank transfers for large custom orders.",
            },
            {
              id: "5",
              title: "How do I track my custom order?",
              content: "You'll receive email updates at each stage of your order. Log into your account to track real-time progress.",
            },
          ]}
          mediaAnimation="slide-up"
          mediaPosition="left"
          imageSrc="http://img.b2bpic.net/free-photo/full-length-portrait-man-holding-smartphone_171337-19093.jpg?_wi=3"
          imageAlt="StyleCraft customer service"
          faqsAnimation="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={false}
          ariaLabel="Contact support FAQ section"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="StyleCraft"
          leftLink={{
            text: "Visit Our Shop",
            href: "/shop",
          }}
          rightLink={{
            text: "Book Consultation",
            href: "/contact",
          }}
          ariaLabel="Site footer"
        />
      </div>
    </ThemeProvider>
  );
}