"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import MediaSplitTabsAbout from '@/components/sections/about/MediaSplitTabsAbout';
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Sparkles, Award, Rocket, Linkedin, Twitter, Github, Mail } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="small"
      sizing="largeSmallSizeMediumTitles"
      background="none"
      cardStyle="gradient-mesh"
      primaryButtonStyle="inset-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="TechAcademy"
          navItems={[
            { name: "About", id: "about" },
            { name: "Courses", id: "features" },
            { name: "Pricing", id: "pricing" },
            { name: "Reviews", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Enroll Now",            href: "contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardGallery
          title="Master In-Demand Tech Skills"
          description="Learn from industry experts in our comprehensive IT courses. From web development to data science, gain practical skills and launch your tech career."
          tag="Start Learning Today"
          tagIcon={Sparkles}
          background={{ variant: "radial-gradient" }}
          mediaItems={[
            {
              imageSrc: "https://img.b2bpic.net/free-photo/medium-shot-people-working-laptops_23-2149739424.jpg",              imageAlt: "Students learning online"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/two-teenage-friends-playing-video-games-together-home_23-2149332883.jpg",              imageAlt: "Programming course"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/friends-having-fun-together_23-2149329703.jpg",              imageAlt: "Tech classroom"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/row-serious-focused-coworkers-sitting-table-typing-laptops_74855-10363.jpg",              imageAlt: "Instructor teaching"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/medium-shot-people-working-laptops_23-2149739424.jpg",              imageAlt: "Learning environment"
            }
          ]}
          buttons={[
            {
              text: "View Courses",              href: "features"
            },
            {
              text: "Get Started",              href: "contact"
            }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <MediaSplitTabsAbout
          title="Why Choose TechAcademy?"
          description="We combine practical training with industry expertise to transform careers."
          tabs={[
            {
              id: "expertise",              label: "Expert Instructors",              description: "Learn from professionals with 10+ years of industry experience. Our instructors are active practitioners who bring real-world knowledge and current best practices to every lesson."
            },
            {
              id: "curriculum",              label: "Updated Curriculum",              description: "Our courses are updated quarterly to reflect the latest technologies and industry trends. Stay ahead with content that matters in today's competitive job market."
            },
            {
              id: "support",              label: "Career Support",              description: "We don't just teach—we mentor. Access career counseling, resume reviews, and interview prep to land your dream job in tech."
            },
            {
              id: "community",              label: "Active Community",              description: "Join a vibrant community of learners and professionals. Network, collaborate, and grow together with peers from around the world."
            }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/close-up-young-business-team-working_23-2149153838.jpg"
          imageAlt="TechAcademy team collaboration"
          imagePosition="right"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardMedia
          title="Popular Courses"
          description="Explore our comprehensive range of IT courses designed for beginners to advanced learners"
          tag="Featured"
          tagIcon={Award}
          features={[
            {
              id: "web-design",              title: "UI/UX Design Mastery",              description: "Create beautiful, user-centered digital experiences. Learn design principles, prototyping, and modern design tools to build interfaces that users love.",              tag: "12 Weeks",              imageSrc: "https://img.b2bpic.net/free-photo/colleagues-studying-together-group-study_23-2149211081.jpg",              buttons: [{ text: "Learn More", href: "pricing" }]
            },
            {
              id: "web-dev",              title: "Full Stack Web Development",              description: "Build complete web applications from frontend to backend. Master JavaScript, React, Node.js, and databases to become a full-stack developer.",              tag: "16 Weeks",              imageSrc: "https://img.b2bpic.net/free-photo/friends-learning-study-group_23-2149257210.jpg",              buttons: [{ text: "Learn More", href: "pricing" }]
            },
            {
              id: "data-science",              title: "Data Science & Analytics",              description: "Transform data into insights. Learn Python, machine learning, and data visualization to solve real-world problems and drive business decisions.",              tag: "14 Weeks",              imageSrc: "https://img.b2bpic.net/free-photo/medium-shot-woman-reading-coffee-shop_23-2150183754.jpg",              buttons: [{ text: "Learn More", href: "pricing" }]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardFive
          title="Simple, Transparent Pricing"
          description="Choose the plan that fits your learning goals and budget"
          plans={[
            {
              id: "starter",              tag: "Beginner Plan",              price: "$199",              period: "/month",              description: "Perfect for those starting their tech journey with foundational knowledge.",              button: { text: "Get Started", href: "contact" },
              featuresTitle: "What's Included:",              features: [
                "Access to 3 foundational courses",                "Weekly live Q&A sessions",                "Course materials and resources",                "Community forum access",                "Certificate of completion"
              ]
            },
            {
              id: "professional",              tag: "Professional Plan",              price: "$399",              period: "/month",              description: "Our most popular plan for serious learners aiming for career advancement.",              button: { text: "Enroll Now", href: "contact" },
              featuresTitle: "What's Included:",              features: [
                "Access to 8 professional courses",                "2 weeks of 1-on-1 mentorship",                "Priority support via Slack",                "Job preparation bootcamp",                "Resume and portfolio review",                "Interview coaching sessions"
              ]
            },
            {
              id: "enterprise",              tag: "Enterprise Plan",              price: "$799",              period: "/month",              description: "Comprehensive program for those committed to mastering multiple tech domains.",              button: { text: "Start Premium", href: "contact" },
              featuresTitle: "What's Included:",              features: [
                "Unlimited course access",                "Unlimited 1-on-1 mentorship",                "Personalized learning path",                "Career placement assistance",                "Lifetime community access",                "Advanced capstone project guidance",                "Direct instructor access"
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwo
          title="Student Success Stories"
          description="Hear from graduates who transformed their careers through our programs"
          testimonials={[
            {
              id: "1",              name: "Sarah Chen",              role: "Senior Frontend Developer",              testimonial: "TechAcademy's Full Stack program completely changed my career trajectory. Within 3 months of completion, I landed a developer role at a top tech company. The mentorship was invaluable!",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg"
            },
            {
              id: "2",              name: "Michael Rodriguez",              role: "Data Scientist",              testimonial: "The data science course was comprehensive and practical. I went from zero coding experience to building machine learning models. Best investment in my future ever.",              imageSrc: "https://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg"
            },
            {
              id: "3",              name: "Emily Watson",              role: "UX Designer",              testimonial: "The UI/UX design curriculum taught me not just tools, but design thinking. I've already used what I learned to redesign my company's entire product interface.",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg"
            },
            {
              id: "4",              name: "James Park",              role: "DevOps Engineer",              testimonial: "The instructors are genuinely invested in your success. They answer questions beyond the curriculum and provide real industry insights that no other platform offers.",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-businessman-with-tie_1098-2867.jpg"
            },
            {
              id: "5",              name: "Lisa Thompson",              role: "Freelance Web Developer",              testimonial: "As a career changer, I was nervous about the transition. TechAcademy's supportive community and structured curriculum made it possible. Now I'm earning 3x what I made before.",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-outdoor-businessman_23-2148763884.jpg"
            },
            {
              id: "6",              name: "David Kim",              role: "Full Stack Developer",              testimonial: "The capstone project was the perfect bridge to employment. It gave me portfolio pieces and experience that directly helped me secure my first tech role.",              imageSrc: "https://img.b2bpic.net/free-photo/closeup-handsome-middle-aged-business-leader_1262-4822.jpg"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Frequently Asked Questions"
          description="Find answers to common questions about our courses, enrollment, and support"
          faqs={[
            {
              id: "1",              title: "Do I need prior coding experience?",              content: "No! Our beginner courses are designed for students with zero programming experience. We start with fundamentals and progress at a sustainable pace. For advanced courses, we recommend basic familiarity with programming concepts."
            },
            {
              id: "2",              title: "How long does it take to complete a course?",              content: "Course duration ranges from 8-16 weeks depending on the program. Most courses involve 15-20 hours of learning per week. You can learn at your own pace with recorded content, but we recommend staying on schedule for optimal progress and community engagement."
            },
            {
              id: "3",              title: "Are the certificates recognized by employers?",              content: "Yes! Our certificates are industry-recognized and valued by employers. Many of our graduates include their TechAcademy certifications on LinkedIn and in job applications. We also provide letters of completion and detailed skill assessments."
            },
            {
              id: "4",              title: "Can I get a refund if I'm not satisfied?",              content: "We offer a 14-day money-back guarantee for our courses. If you're not satisfied within the first two weeks, we'll provide a full refund. We're confident you'll love the program!"
            },
            {
              id: "5",              title: "How much support will I receive?",              content: "Support varies by plan. Starter plan includes community forum access. Professional and Enterprise plans include dedicated mentorship, priority support channels, and direct instructor access. All plans include weekly live Q&A sessions."
            },
            {
              id: "6",              title: "Do you offer job placement guarantees?",              content: "While we can't guarantee placement, our Enterprise plan includes dedicated job placement assistance and interview coaching. We have a strong track record of helping 85% of graduates secure tech positions within 3 months of course completion."
            }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/front-view-friends-playing-videogames_23-2150571961.jpg"
          imageAlt="Customer support representative helping students"
          mediaPosition="left"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get Started"
          title="Ready to Transform Your Tech Career?"
          description="Join hundreds of successful graduates who've built rewarding careers in technology. Sign up now to learn more about enrollment and get exclusive access to course previews."
          tagIcon={Rocket}
          inputPlaceholder="Enter your email address"
          buttonText="Enroll Now"
          termsText="By enrolling, you'll receive course information and updates. We respect your privacy and you can unsubscribe anytime."
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="TechAcademy"
          copyrightText="© 2025 TechAcademy. All rights reserved. | Privacy Policy | Terms of Service"
          socialLinks={[
            {
              icon: Linkedin,
              href: "https://linkedin.com/company/techacademy",              ariaLabel: "LinkedIn"
            },
            {
              icon: Twitter,
              href: "https://twitter.com/techacademy",              ariaLabel: "Twitter"
            },
            {
              icon: Github,
              href: "https://github.com/techacademy",              ariaLabel: "GitHub"
            },
            {
              icon: Mail,
              href: "mailto:hello@techacademy.com",              ariaLabel: "Email"
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}