"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";

export default function WithPage() {
  return (
    <ThemeProvider defaultButtonVariant="expand-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="compact"
      sizing="largeSmallSizeLargeTitles"
      background="circleGradient"
      cardStyle="gradient-radial"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="layered"
      headingFontWeight="light">
      <main>
        <div id="contact-section" data-section="contact-section">
          <ContactSplitForm
            title="Get in Touch with No Song"
            description="Have questions about our instruments or need expert advice? Our team is here to help you find the perfect sound for your musical journey."
            inputs={[
              {
                name: "name",
                type: "text",
                placeholder: "Your Name",
                required: true
              },
              {
                name: "email",
                type: "email",
                placeholder: "Your Email",
                required: true
              },
              {
                name: "phone",
                type: "tel",
                placeholder: "Phone Number"
              }
            ]}
            textarea={{
              name: "message",
              placeholder: "Tell us about your musical interests and how we can help...",
              rows: 5,
              required: true
            }}
            useInvertedBackground={false}
            imageSrc="https://img.b2bpic.net/free-photo/abstract-luxury-gradient-blue-background_53876-120942.jpg"
            imageAlt="No Song Musical Instruments Store"
            mediaPosition="right"
            mediaAnimation="fade-in"
            buttonText="Send Message"
            ariaLabel="Contact form for No Song musical instruments store"
            className="py-16"
            containerClassName="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"
            contentClassName="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"
            formCardClassName="bg-white rounded-lg shadow-lg p-8"
            titleClassName="text-3xl font-bold text-gray-900 mb-4"
            descriptionClassName="text-gray-600 mb-8"
            buttonClassName="w-full bg-red-600 hover:bg-red-700 text-white font-semibold py-3 px-6 rounded-lg transition-colors"
            buttonTextClassName="text-white"
            mediaWrapperClassName="rounded-lg overflow-hidden shadow-lg"
            mediaClassName="w-full h-auto object-cover"
          />
        </div>
      </main>
    </ThemeProvider>
  );
}
