"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import ContactText from "@/components/sections/contact/ContactText";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";

export default function ContactPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="small"
      sizing="mediumLargeSizeMediumTitles"
      background="radialGradient"
      cardStyle="layered-gradient"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="glass"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="BogCoder"
          navItems={[
            { name: "Courses", id: "courses" },
            { name: "About", id: "about" },
            { name: "Pricing", id: "pricing" },
            { name: "FAQ", id: "faq" }
          ]}
          button={{
            text: "Enroll Now",            href: "/contact"
          }}
        />
      </div>

      <div id="contact" data-section="contact" className="pt-20">
        <ContactText
          text="Ready to transform your career? Join hundreds of successful graduates and start your coding journey with BogCoder today. Our admissions team is here to help you find the perfect course."
          animationType="entrance-slide"
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Enroll Now", href: "/contact" },
            { text: "Schedule Consultation", href: "/contact" }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="BogCoder"
          columns={[
            {
              items: [
                { label: "Courses", href: "/courses" },
                { label: "Pricing", href: "/pricing" },
                { label: "Career Support", href: "#" }
              ]
            },
            {
              items: [
                { label: "About Us", href: "/about" },
                { label: "Our Team", href: "#" },
                { label: "Blog", href: "#" }
              ]
            },
            {
              items: [
                { label: "FAQ", href: "/faq" },
                { label: "Contact", href: "/contact" },
                { label: "Support", href: "#" }
              ]
            },
            {
              items: [
                { label: "Terms of Service", href: "#" },
                { label: "Privacy Policy", href: "#" },
                { label: "Refund Policy", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}