"use client";

import Link from 'next/link';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import ContactText from '@/components/sections/contact/ContactText';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';

export default function CoursesPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="mediumLarge"
      sizing="largeSmallSizeLargeTitles"
      background="aurora"
      cardStyle="glass-elevated"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="ChayNik"
          navItems={[
            { name: "Home", id: "/" },
            { name: "Courses", id: "/courses" },
            { name: "Contact", id: "/contact" }
          ]}
          button={{ text: "Enroll Now", href: "/contact" }}
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardOne
          title="Our Courses"
          description="Choose from our carefully curated selection of IT courses designed to meet current industry demands"
          tag="Available Programs"
          products={[
            {
              id: "1",
              name: "Full Stack Web Development",
              price: "₹24,999",
              imageSrc: "https://img.b2bpic.net/free-photo/person-front-computer-working-html_23-2150040416.jpg",
              imageAlt: "Full Stack Web Development course"
            },
            {
              id: "2",
              name: "Data Science & Analytics",
              price: "₹28,999",
              imageSrc: "https://img.b2bpic.net/free-photo/programming-background-with-person-working-with-codes-computer_23-2150010130.jpg",
              imageAlt: "Data Science & Analytics course"
            },
            {
              id: "3",
              name: "Cloud & DevOps Engineering",
              price: "₹26,999",
              imageSrc: "https://img.b2bpic.net/free-vector/app-development-concept-with-desktop_23-2148700922.jpg",
              imageAlt: "Cloud & DevOps Engineering course"
            },
            {
              id: "4",
              name: "Mobile App Development",
              price: "₹24,999",
              imageSrc: "https://img.b2bpic.net/free-photo/programming-background-with-html-text_23-2150040420.jpg",
              imageAlt: "Mobile App Development course"
            },
            {
              id: "5",
              name: "QA Automation Testing",
              price: "₹19,999",
              imageSrc: "https://img.b2bpic.net/free-photo/html-css-collage-concept_23-2150061960.jpg",
              imageAlt: "QA Automation Testing course"
            },
            {
              id: "6",
              name: "Python for Beginners",
              price: "₹14,999",
              imageSrc: "https://img.b2bpic.net/free-photo/person-working-html-computer_23-2150040415.jpg",
              imageAlt: "Python for Beginners course"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          buttons={[{ text: "View All Courses", href: "#" }]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitText
          sideTitle="Frequently Asked Questions"
          sideDescription="Find answers to common questions about ChayNik programs, enrollment, and career support"
          textPosition="left"
          useInvertedBackground="invertDefault"
          faqs={[
            {
              id: "1",
              title: "What programming languages do you teach?",
              content: "We teach Python, JavaScript, Java, C++, SQL, and more depending on your chosen track. All languages are selected based on current industry demand and job market trends."
            },
            {
              id: "2",
              title: "Do I need prior coding experience to enroll?",
              content: "No! Our programs are designed for beginners with no coding experience. We start from fundamentals and progress to advanced concepts. We also have specialized tracks for professionals looking to upskill."
            },
            {
              id: "3",
              title: "What is the duration of courses?",
              content: "Most intensive programs are 8-12 weeks. We also offer flexible part-time options (3-6 months) for working professionals. Each course can be customized based on your pace and schedule."
            },
            {
              id: "4",
              title: "Do you provide job placement assistance?",
              content: "Yes! Our dedicated career services team provides resume coaching, interview prep, LinkedIn profile optimization, and direct job placement support. Our 95% placement rate speaks to our commitment."
            },
            {
              id: "5",
              title: "What is your refund policy?",
              content: "We offer a 7-day money-back guarantee if you're not satisfied with the program. If you complete the course and don't find employment within 3 months, we provide additional training at no extra cost."
            },
            {
              id: "6",
              title: "Can I access course materials after completion?",
              content: "Absolutely! You get lifetime access to all course materials, recordings, and code repositories. We also provide updates when new technologies emerge in your field."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to enroll in one of our courses? Start your journey to a successful tech career today and join our community of professionals."
          animationType="entrance-slide"
          buttons={[
            { text: "Enroll Now", href: "#" },
            { text: "Schedule Demo", href: "#" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <FooterLogoReveal logoText="ChayNik" />
    </ThemeProvider>
  );
}