"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import TeamCardSix from '@/components/sections/team/TeamCardSix';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterCard from '@/components/sections/footer/FooterCard';
import { BookOpen, Code2, Github, Lightbulb, Linkedin, Mail, Sparkles, Star, Target, Twitter, Users, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="smallMedium"
      sizing="medium"
      background="none"
      cardStyle="outline"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="glass"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="Pes Coder"
          navItems={[
            { name: "About", id: "about" },
            { name: "Courses", id: "courses" },
            { name: "Pricing", id: "pricing" },
            { name: "Team", id: "team" },
            { name: "FAQ", id: "faq" }
          ]}
          button={{
            text: "Enroll Now",            href: "contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboard
          logoText="Pes Coder"
          description="Master coding from fundamentals to advanced development. Industry-expert instructors, hands-on projects, and career-ready skills."
          imageSrc="https://img.b2bpic.net/free-photo/spacious-area-group-young-people-casual-clothes-working-modern-office_146671-16510.jpg"
          imageAlt="Coding classroom with students learning programming"
          frameStyle="card"
        />
      </div>

      <div id="about" data-section="about">
        <TestimonialAboutCard
          tag="Our Mission"
          tagIcon={Lightbulb}
          title="Empowering the next generation of coders through practical, industry-focused education."
          description="Pes Coder Academy"
          subdescription="Founded 2015 · 5,000+ Students Trained"
          icon={Code2}
          imageSrc="https://img.b2bpic.net/free-photo/college-students-different-ethnicities-cramming_23-2149891341.jpg"
          imageAlt="Educational team collaboration"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="curriculum" data-section="curriculum">
        <FeatureCardSeven
          title="Our Curriculum"
          description="Comprehensive coding education structured for progressive learning and skill mastery."
          tag="Learn"
          tagIcon={Zap}
          features={[
            {
              id: 1,
              title: "Web Development Fundamentals",              description: "HTML, CSS, JavaScript basics and responsive design principles. Build your first interactive websites.",              imageSrc: "https://img.b2bpic.net/free-photo/programming-background-with-html-text_23-2150040420.jpg",              imageAlt: "Web development course"
            },
            {
              id: 2,
              title: "Advanced JavaScript & React",              description: "Modern frontend frameworks, component architecture, and state management with React.js.",              imageSrc: "https://img.b2bpic.net/free-photo/html-css-collage-concept-with-person_23-2150062004.jpg",              imageAlt: "React and JavaScript development"
            },
            {
              id: 3,
              title: "Mobile App Development",              description: "iOS and Android development with modern tools. Create apps for millions of users.",              imageSrc: "https://img.b2bpic.net/free-photo/person-front-computer-working-html_23-2150040428.jpg",              imageAlt: "Mobile app development course"
            },
            {
              id: 4,
              title: "Python & Data Science",              description: "Python programming, data analysis, machine learning basics, and AI fundamentals.",              imageSrc: "https://img.b2bpic.net/free-photo/programming-background-with-person-working-with-codes-computer_23-2150010130.jpg",              imageAlt: "Python and data science training"
            }
          ]}
          textboxLayout="default"
          animationType="blur-reveal"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="courses" data-section="courses">
        <ProductCardOne
          title="Featured Courses"
          description="Choose from our selection of industry-standard coding courses designed for all skill levels."
          tag="Explore"
          tagIcon={BookOpen}
          products={[
            {
              id: "1",              name: "Web Development Bundle",              price: "$299",              imageSrc: "https://img.b2bpic.net/free-photo/programming-background-with-html-text_23-2150040420.jpg",              imageAlt: "Web Development course"
            },
            {
              id: "2",              name: "Mobile Development Intensive",              price: "$349",              imageSrc: "https://img.b2bpic.net/free-photo/person-front-computer-working-html_23-2150040428.jpg",              imageAlt: "Mobile Development course"
            },
            {
              id: "3",              name: "Python Fundamentals",              price: "$249",              imageSrc: "https://img.b2bpic.net/free-photo/programming-background-with-person-working-with-codes-computer_23-2150010130.jpg",              imageAlt: "Python programming course"
            },
            {
              id: "4",              name: "Full Stack Mastery",              price: "$449",              imageSrc: "https://img.b2bpic.net/free-photo/html-css-collage-concept-with-person_23-2150062004.jpg",              imageAlt: "Full Stack development course"
            }
          ]}
          gridVariant="four-items-2x2-equal-grid"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardThree
          title="Course Pricing"
          description="Flexible pricing options to fit your learning goals and budget."
          tag="Invest in Your Future"
          tagIcon={Target}
          plans={[
            {
              id: "starter",              price: "$199/month",              name: "Starter Plan",              buttons: [
                { text: "Get Started", href: "contact" },
                { text: "Learn More" }
              ],
              features: [
                "Access to 2 beginner courses",                "Weekly live Q&A sessions",                "Community forum access",                "Certificate of completion"
              ]
            },
            {
              id: "professional",              badge: "Most Popular",              badgeIcon: Sparkles,
              price: "$399/month",              name: "Professional Plan",              buttons: [
                { text: "Enroll Now", href: "contact" },
                { text: "Free Trial" }
              ],
              features: [
                "Unlimited course access",                "1-on-1 mentoring sessions",                "Real-world project portfolio",                "Job placement assistance",                "Priority support"
              ]
            },
            {
              id: "enterprise",              price: "$799/month",              name: "Enterprise Plan",              buttons: [
                { text: "Contact Sales", href: "contact" },
                { text: "Schedule Demo" }
              ],
              features: [
                "All Professional features",                "Dedicated learning manager",                "Custom curriculum design",                "Team training support",                "Corporate certifications"
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardSix
          title="Meet Our Instructors"
          description="Expert developers and educators with 10+ years industry experience."
          tag="Leadership"
          tagIcon={Users}
          members={[
            {
              id: "1",              name: "Rajesh Kumar",              role: "Founder & Lead Instructor",              imageSrc: "https://img.b2bpic.net/free-photo/mature-business-manager-office_1098-21368.jpg",              imageAlt: "Rajesh Kumar"
            },
            {
              id: "2",              name: "Priya Sharma",              role: "Full Stack Developer",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-young-business-person-doing-internship_23-2149305396.jpg",              imageAlt: "Priya Sharma"
            },
            {
              id: "3",              name: "Arun Patel",              role: "Mobile Development Expert",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-positive-man-white-shirt-standing-with-arms-folded-looking-away-dark-gray-copy-space_171337-451.jpg",              imageAlt: "Arun Patel"
            },
            {
              id: "4",              name: "Neha Gupta",              role: "Data Science Mentor",              imageSrc: "https://img.b2bpic.net/free-photo/smiling-businessman-holding-jacket-shoulder_1262-3853.jpg",              imageAlt: "Neha Gupta"
            }
          ]}
          gridVariant="four-items-2x2-equal-grid"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardOne
          title="Student Success Stories"
          description="Hear from graduates who transformed their careers through Pes Coder training."
          tag="Impact"
          tagIcon={Star}
          testimonials={[
            {
              id: "1",              name: "Vikram Singh",              role: "Software Engineer",              company: "Tech Startup",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/vertical-shot-happy-young-woman-with-curly-hair-holds-notepad-pen-makes-notes-what-she-observes-around-city-dressed-casual-green-jumper-poses-outdoors-against-blurred-background_273609-56665.jpg",              imageAlt: "Vikram Singh"
            },
            {
              id: "2",              name: "Anjali Desai",              role: "Frontend Developer",              company: "E-commerce Platform",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/woman-sitting-library-couch_273609-12733.jpg",              imageAlt: "Anjali Desai"
            },
            {
              id: "3",              name: "Rohit Verma",              role: "Full Stack Developer",              company: "SaaS Company",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/side-view-smiley-woman-holding-book_23-2149535705.jpg",              imageAlt: "Rohit Verma"
            },
            {
              id: "4",              name: "Meera Iyer",              role: "Mobile App Developer",              company: "App Studio",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/happy-boy-posing-with-tablet_23-2147655887.jpg",              imageAlt: "Meera Iyer"
            },
            {
              id: "5",              name: "Sanjay Rao",              role: "DevOps Engineer",              company: "Cloud Solutions",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/young-woman-casual-wearing-pink-background_185193-110335.jpg",              imageAlt: "Sanjay Rao"
            },
            {
              id: "6",              name: "Pooja Nair",              role: "Data Scientist",              company: "Analytics Firm",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/young-female-teacher-eyeglasses-with-curly-hair-standing-with-books-hand-grey-wall-enjoying-her-work-college-being-clever-intellectual_171337-230.jpg",              imageAlt: "Pooja Nair"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitText
          sideTitle="Frequently Asked Questions"
          sideDescription="Find answers to common questions about our courses, enrollment, and learning experience."
          textPosition="left"
          useInvertedBackground="noInvert"
          faqs={[
            {
              id: "1",              title: "What are the prerequisites for enrolling?",              content: "No prior coding experience required! Our beginner courses start from the fundamentals. If you have experience, we offer intermediate and advanced tracks to match your level."
            },
            {
              id: "2",              title: "How long does each course take?",              content: "Most courses run for 8-12 weeks with flexible pacing. You can learn at your own speed while accessing live sessions and mentorship. Professional plan members get lifetime access to course materials."
            },
            {
              id: "3",              title: "Do you provide job placement assistance?",              content: "Yes! Professional and Enterprise plan members receive job placement support, resume reviews, interview prep, and connections with our hiring partner network of 200+ companies."
            },
            {
              id: "4",              title: "Are the certificates recognized by employers?",              content: "Our certificates are industry-recognized and respected by major tech companies. Many graduates have successfully secured positions at top firms using their Pes Coder credentials."
            },
            {
              id: "5",              title: "Can I switch plans or courses?",              content: "Absolutely! You can upgrade your plan anytime or switch between courses. We offer a 7-day satisfaction guarantee with full refunds if you're not satisfied."
            },
            {
              id: "6",              title: "What is the student support like?",              content: "We provide 24/7 community forum support, weekly Q&A sessions with instructors, dedicated mentoring for professional members, and Discord community access for peer learning."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get Started"
          tagIcon={Mail}
          title="Ready to launch your coding career?"
          description="Join thousands of graduates who landed their dream tech jobs. Subscribe to our newsletter for course updates, coding tips, and exclusive enrollment offers."
          inputPlaceholder="Enter your email address"
          buttonText="Sign Up"
          termsText="We respect your privacy. Unsubscribe anytime. No spam, just valuable content."
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="Pes Coder"
          copyrightText="© 2025 Pes Coder Academy. All rights reserved."
          socialLinks={[
            {
              icon: Linkedin,
              href: "https://linkedin.com/company/pes-coder",              ariaLabel: "LinkedIn"
            },
            {
              icon: Github,
              href: "https://github.com/pes-coder",              ariaLabel: "GitHub"
            },
            {
              icon: Twitter,
              href: "https://twitter.com/pes_coder",              ariaLabel: "Twitter"
            },
            {
              icon: Mail,
              href: "mailto:info@pescoder.com",              ariaLabel: "Email"
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}