"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import TestimonialCardNine from '@/components/sections/testimonial/TestimonialCardNine';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Rocket, Sparkles, Code, Crown, Zap, Users, TrendingUp, Award, Star, Mail } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="reveal-blur"
      borderRadius="sharp"
      contentWidth="medium"
      sizing="large"
      background="dotGrid"
      cardStyle="outline-light"
      primaryButtonStyle="outline"
      secondaryButtonStyle="layered"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="No 404"
          navItems={[
            {name: "Programs", id: "programs"},
            {name: "Features", id: "features"},
            {name: "About", id: "about"},
            {name: "Testimonials", id: "testimonials"},
            {name: "Contact", id: "contact"}
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardScroll
          title="No 404 in My Life"
          description="Master the skills that matter. Learn from industry experts, build real projects, and launch your tech career with confidence."
          tag="Transform Your Future"
          tagIcon={Rocket}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767624794551-p84nvsge.jpg"
          imageAlt="Coding dashboard and learning interface"
          buttons={[
            {text: "Explore Programs", href: "programs"},
            {text: "Schedule Demo", href: "contact"}
          ]}
        />
      </div>

      <div id="programs" data-section="programs">
        <PricingCardTwo
          title="Our Learning Programs"
          description="Choose the program that fits your learning goals and pace. All programs include hands-on projects, mentorship, and career support."
          tag="Programs"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          plans={[
            {
              id: "fundamentals",
              badge: "Fundamentals",
              badgeIcon: Sparkles,
              price: "$299",
              subtitle: "Perfect for beginners starting their coding journey",
              buttons: [
                {text: "Enroll Now", href: "contact"},
                {text: "Learn More"}
              ],
              features: [
                "6-week intensive program",
                "HTML, CSS, JavaScript basics",
                "4 hands-on projects",
                "Weekly mentorship sessions",
                "Career guidance included"
              ]
            },
            {
              id: "intermediate",
              badge: "Full Stack",
              badgeIcon: Code,
              price: "$599",
              subtitle: "Become a full-stack developer with React & Node.js",
              buttons: [
                {text: "Enroll Now", href: "contact"},
                {text: "Learn More"}
              ],
              features: [
                "12-week comprehensive program",
                "React, Node.js, MongoDB",
                "8 capstone projects",
                "Daily office hours",
                "Job placement support",
                "Portfolio building"
              ]
            },
            {
              id: "advanced",
              badge: "Professional",
              badgeIcon: Crown,
              price: "$999",
              subtitle: "Advanced training for experienced developers",
              buttons: [
                {text: "Enroll Now", href: "contact"},
                {text: "Learn More"}
              ],
              features: [
                "16-week mastery program",
                "Advanced patterns & architecture",
                "Real-world client projects",
                "1-on-1 technical mentorship",
                "Guaranteed job interviews",
                "Salary negotiation coaching"
              ]
            },
            {
              id: "bootcamp",
              badge: "Intensive",
              badgeIcon: Zap,
              price: "$1,499",
              subtitle: "Fast-track your career with our intensive bootcamp",
              buttons: [
                {text: "Apply Now", href: "contact"},
                {text: "Learn More"}
              ],
              features: [
                "24-week immersive bootcamp",
                "Full-stack + DevOps + System Design",
                "15+ production projects",
                "Daily pair programming",
                "100% job placement guarantee",
                "Lifetime mentorship access"
              ]
            }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardSeven
          title="Why Choose No 404?"
          description="Our approach combines cutting-edge curriculum, expert instructors, and real-world projects to ensure your success."
          tag="Key Features"
          textboxLayout="default"
          animationType="blur-reveal"
          useInvertedBackground="noInvert"
          features={[
            {
              id: 1,
              title: "Industry-Aligned Curriculum",
              description: "Learn the exact technologies companies are hiring for. Our curriculum is updated quarterly based on market demand and employer feedback.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767624795075-23o1lzoq.jpg"
            },
            {
              id: 2,
              title: "Expert Mentorship",
              description: "Learn directly from engineers working at top tech companies. Get personalized guidance, code reviews, and career advice from experienced professionals.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767624795559-cchgw6pf.jpg"
            },
            {
              id: 3,
              title: "Real-World Projects",
              description: "Build production-ready applications that go into your portfolio. Work on projects that solve real problems and impress potential employers.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767624795996-tvcpzgjo.jpg"
            }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardThree
          title="Our Impact"
          description="Track record of success with measurable outcomes that matter."
          tag="Success Metrics"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          gridVariant="four-items-2x2-equal-grid"
          metrics={[
            {
              id: "1",
              icon: Users,
              title: "Students Trained",
              value: "5,000+"
            },
            {
              id: "2",
              icon: TrendingUp,
              title: "Job Placement Rate",
              value: "94%"
            },
            {
              id: "3",
              icon: Award,
              title: "Avg Salary Increase",
              value: "+125%"
            },
            {
              id: "4",
              icon: Star,
              title: "Student Satisfaction",
              value: "4.9/5.0"
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardNine
          title="Trusted by Graduates"
          description="Hear from students who transformed their careers with No 404."
          tag="Success Stories"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          testimonials={[
            {
              id: "1",
              quote: "No 404 completely changed my career trajectory. The mentorship was invaluable, and I landed a job at a top tech company within 3 months of graduation.",
              name: "Sarah Chen",
              role: "Senior Frontend Engineer at Google",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767624797006-llakvf1z.jpg",
              imageAlt: "Sarah Chen"
            },
            {
              id: "2",
              quote: "The real-world projects gave me the confidence I needed. I wasn't just learning theory—I was building actual products that users depend on.",
              name: "Marcus Williams",
              role: "Full Stack Developer at Microsoft",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548558618-eb3n8tuw.jpg",
              imageAlt: "Marcus Williams"
            },
            {
              id: "3",
              quote: "Coming from a non-tech background, I was nervous. The instructors made everything accessible and the peer support was incredible. Best decision I made.",
              name: "Priya Patel",
              role: "Backend Engineer at Stripe",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767624797331-vrtdfm4n.jpg",
              imageAlt: "Priya Patel"
            },
            {
              id: "4",
              quote: "The job placement support was phenomenal. They didn't just teach coding—they prepared us for interviews, negotiations, and the first day on the job.",
              name: "James Rodriguez",
              role: "DevOps Engineer at Amazon",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767624797654-w1d30xbh.jpg",
              imageAlt: "James Rodriguez"
            },
            {
              id: "5",
              quote: "I doubled my salary after completing the bootcamp. The hands-on experience and mentorship made all the difference in my career growth.",
              name: "Elena Kovacs",
              role: "Lead Developer at Meta",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767624798100-vvknzeqg.jpg",
              imageAlt: "Elena Kovacs"
            },
            {
              id: "6",
              quote: "The community here is amazing. Even after graduation, I have access to mentorship and career advice. It feels like a family, not just a school.",
              name: "David Kim",
              role: "Product Engineer at Apple",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767624798485-08620aif.jpg",
              imageAlt: "David Kim"
            }
          ]}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Frequently Asked Questions"
          description="Get answers to common questions about our programs, enrollment, and support."
          tag="Help & Support"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
          faqs={[
            {
              id: "1",
              title: "What are the prerequisites for enrollment?",
              content: "Our Fundamentals program requires only basic computer skills. For intermediate and advanced programs, we recommend prior coding experience or completion of our Fundamentals course. All applicants take a brief assessment to ensure proper placement."
            },
            {
              id: "2",
              title: "What's the time commitment?",
              content: "Fundamentals: 20 hours/week (6 weeks). Full Stack: 25-30 hours/week (12 weeks). Professional: 30-35 hours/week (16 weeks). Intensive Bootcamp: 40+ hours/week (24 weeks). We offer flexible scheduling and part-time options for working professionals."
            },
            {
              id: "3",
              title: "Do you offer job placement assistance?",
              content: "Yes! All our programs include career coaching, resume optimization, interview preparation, and job search support. Our Full Stack and Intensive Bootcamp programs come with job placement guarantees and direct connections to hiring partners."
            },
            {
              id: "4",
              title: "What if I fall behind?",
              content: "We provide personalized support including additional tutoring sessions, optional review workshops, and flexible pacing options. Our mentors and peer support community ensure you have the help you need to succeed."
            },
            {
              id: "5",
              title: "What's your refund policy?",
              content: "We offer a 7-day money-back guarantee if you're not satisfied. After that, you can discuss payment plans or alternative program options with our enrollment team."
            },
            {
              id: "6",
              title: "Can I transfer credits or programs?",
              content: "Yes, you can apply credits from our Fundamentals program toward Full Stack or Professional programs. We also allow program switches with a grace period if your goals change."
            },
            {
              id: "7",
              title: "How do you keep curriculum current?",
              content: "Our curriculum team meets quarterly with industry partners to stay updated on the latest technologies and market demands. We continuously update course materials, projects, and tools."
            },
            {
              id: "8",
              title: "Is there lifetime access to course materials?",
              content: "All program graduates get lifetime access to course materials, video recordings, and community forums. You can review materials anytime and stay connected with the No 404 community."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Enrollment"
          title="Start Your Journey Today"
          description="Join thousands of students who have transformed their careers with No 404. Get in touch to learn more about our programs and take the first step toward your dream job."
          useInvertedBackground="noInvert"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767624796457-y3gecw0f.jpg"
          imageAlt="Newsletter signup and enrollment"
          mediaPosition="right"
          tagIcon={Mail}
          inputPlaceholder="Enter your email"
          buttonText="Get Started"
          termsText="We respect your privacy. Unsubscribe at any time. By enrolling, you agree to our Terms of Service."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="No 404"
        />
      </div>
    </ThemeProvider>
  );
}