"use client"

import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';

export default function ContactPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="slide-background"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="mediumSizeLargeTitles"
      background="aurora"
      cardStyle="layered-gradient"
      primaryButtonStyle="inset-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen 
          navItems={[
            {name: "Home", id: "/"},
            {name: "Products", id: "#products"},
            {name: "Shop", id: "/shop"},
            {name: "About", id: "#about"},
            {name: "Testimonials", id: "#testimonials"},
            {name: "Contact", id: "/contact"}
          ]}
          brandName="Kvitok"
          bottomLeftText="Fresh Flowers Daily"
          bottomRightText="hello@kvitok.com"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm 
          title="Get in Touch"
          description="Have questions about our flowers or services? Reach out to our team. We're here to help and would 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: "Phone Number",              required: false
            }
          ]}
          textarea={{
            name: "message",            placeholder: "Tell us about your floral needs or questions...",            rows: 5,
            required: true
          }}
          useInvertedBackground="noInvert"
          imageSrc="https://img.b2bpic.net/free-photo/flat-lay-beautifully-bloomed-colorful-rose-flowers_23-2149005538.jpg"
          imageAlt="Beautiful flower arrangement"
          mediaPosition="right"
          buttonText="Send Message"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia 
          imageSrc="https://img.b2bpic.net/free-photo/flower-cake_74190-4879.jpg"
          imageAlt="Beautiful flower field"
          columns={[
            {
              title: "Shop",              items: [
                { label: "All Arrangements", href: "/shop" },
                { label: "Collections", href: "/#feature" },
                { label: "Custom Orders", href: "/contact" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "/#about" },
                { label: "Contact Us", href: "/contact" },
                { label: "Testimonials", href: "/#testimonials" }
              ]
            },
            {
              title: "Support",              items: [
                { label: "FAQ", href: "/#faq" },
                { label: "Delivery Info", href: "/#faq" },
                { label: "Care Guide", href: "/#faq" }
              ]
            }
          ]}
          logoText="KVITOK"
          copyrightText="© 2025 Kvitok Flowers. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}
