"use client";

import Link from "next/link";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import FeatureCardNineteen from "@/components/sections/feature/FeatureCardNineteen";
import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
import FaqSplitText from "@/components/sections/faq/FaqSplitText";
import FooterCard from "@/components/sections/footer/FooterCard";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Github, Twitter, Linkedin } from "lucide-react";

export default function PracticePage() {
  const navItems = [
    { name: "Home", id: "home" },
    { name: "Learn Python", id: "learn" },
    { name: "Practice", id: "practice" },
    { name: "Interpreter", id: "interpreter" },
  ];

  const navLinks = [
    { href: "/", label: "Home" },
    { href: "/learn", label: "Learn Python" },
    { href: "/practice", label: "Practice" },
    { href: "/interpreter", label: "Interpreter" },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="small"
      sizing="medium"
      background="blurBottom"
      cardStyle="gradient-mesh"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          navItems={navItems}
          brandName="PyLearn"
          button={{
            text: "Get Started",
            href: "/learn",
          }}
        />
      </div>

      <div id="features" data-section="features" className="mx-auto px-4 md:px-6 py-12 md:py-20">
        <FeatureCardNineteen
          tag="Practice Challenges"
          tagIcon={undefined}
          tagAnimation="slide-up"
          title="Strengthen Your Python Skills Through Practice"
          description="Our carefully designed challenges help you apply what you've learned and build confidence in your programming abilities."
          textboxLayout="split"
          useInvertedBackground={false}
          features={[
            {
              id: 1,
              tag: "Beginner Challenges",
              title: "Start Simple",
              subtitle: "Build Confidence with Basic Problems",
              description: "Begin with fundamental challenges involving variables, loops, and simple functions. Each challenge includes helpful hints and example solutions.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B6sh1xZKNJYDe63NCnshCWKiPL/a-coding-challenges-platform-showing-beg-1773824100597-aef15a40.png?_wi=3",
              imageAlt: "Python coding challenges",
            },
            {
              id: 2,
              tag: "Intermediate Problems",
              title: "Level Up",
              subtitle: "Tackle More Complex Solutions",
              description: "Progress to challenges involving data structures, file handling, and algorithmic thinking. Test your understanding with real-world scenarios.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B6sh1xZKNJYDe63NCnshCWKiPL/an-intermediate-python-programmer-workin-1773824099739-6f478f46.png?_wi=3",
              imageAlt: "Python intermediate problems",
            },
            {
              id: 3,
              tag: "Real-World Projects",
              title: "Apply Knowledge",
              subtitle: "Build Practical Python Applications",
              description: "Work on mini-projects that solve real problems. From data analysis to simple automation tasks, see Python in action.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B6sh1xZKNJYDe63NCnshCWKiPL/python-web-development-scene-showing-fla-1773824099826-147f4a68.png?_wi=2",
              imageAlt: "Python real-world projects",
            },
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials" className="mx-auto px-4 md:px-6 py-12 md:py-20">
        <TestimonialCardTwelve
          cardTitle="Students Love Practicing on PyLearn"
          cardTag="Success Stories"
          cardTagIcon={undefined}
          cardAnimation="blur-reveal"
          useInvertedBackground={false}
          testimonials={[
            {
              id: "1",
              name: "Sarah Johnson",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B6sh1xZKNJYDe63NCnshCWKiPL/professional-headshot-photo-of-a-young-p-1773824099410-832f9c00.png?_wi=2",
              imageAlt: "Sarah Johnson",
            },
            {
              id: "2",
              name: "Marcus Chen",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B6sh1xZKNJYDe63NCnshCWKiPL/professional-headshot-of-a-mid-career-de-1773824098653-ff4cffc6.png?_wi=2",
              imageAlt: "Marcus Chen",
            },
            {
              id: "3",
              name: "Priya Patel",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B6sh1xZKNJYDe63NCnshCWKiPL/professional-headshot-of-a-diverse-tech--1773824099111-c3409ef1.png?_wi=2",
              imageAlt: "Priya Patel",
            },
            {
              id: "4",
              name: "James Williams",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B6sh1xZKNJYDe63NCnshCWKiPL/professional-headshot-of-a-successful-pr-1773824098688-76774071.png?_wi=2",
              imageAlt: "James Williams",
            },
          ]}
        />
      </div>

      <div id="faq" data-section="faq" className="mx-auto px-4 md:px-6 py-12 md:py-20">
        <FaqSplitText
          sideTitle="Practice FAQs"
          sideDescription="Find answers to common questions about our coding challenges and practice platform."
          faqs={[
            {
              id: "1",
              title: "How are the challenges organized?",
              content: "Our challenges are organized by difficulty level: Beginner, Intermediate, and Advanced. Within each level, challenges are grouped by topic (loops, functions, data structures, etc.) to help you practice specific skills.",
            },
            {
              id: "2",
              title: "Can I get hints if I'm stuck?",
              content: "Yes! Each challenge includes optional hints that progressively guide you toward the solution without giving away the answer. You can also view the sample solution after solving the challenge.",
            },
            {
              id: "3",
              title: "How do I submit my solution?",
              content: "Simply write your code in the integrated editor and click Submit. Your code will be tested against multiple test cases, and you'll receive instant feedback on whether your solution is correct.",
            },
            {
              id: "4",
              title: "Can I see other people's solutions?",
              content: "After solving a challenge, you can view the official sample solution and discuss different approaches in our community forum. Multiple solutions to the same problem help you learn different techniques.",
            },
            {
              id: "5",
              title: "Do I need to complete challenges in order?",
              content: "No! While we recommend following the suggested progression, you're free to choose challenges in any order. Start with topics that interest you most.",
            },
            {
              id: "6",
              title: "How often are new challenges added?",
              content: "We add new challenges every week across all difficulty levels and topics. Check the Practice section regularly to discover fresh challenges and continue expanding your skills.",
            },
          ]}
          faqsAnimation="blur-reveal"
          useInvertedBackground={true}
          textPosition="left"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="PyLearn"
          copyrightText="© 2024 PyLearn | Making Python Education Accessible"
          socialLinks={[
            {
              icon: Github,
              href: "https://github.com",
              ariaLabel: "GitHub",
            },
            {
              icon: Twitter,
              href: "https://twitter.com",
              ariaLabel: "Twitter",
            },
            {
              icon: Linkedin,
              href: "https://linkedin.com",
              ariaLabel: "LinkedIn",
            },
          ]}
        />
      </div>
    </ThemeProvider>
  );
}