"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';
import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
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 ContactText from '@/components/sections/contact/ContactText';
import FooterSplit from '@/components/sections/footer/FooterSplit';
import { Sparkles, Phone, Mail, MapPin } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="reveal-blur"
      borderRadius="sharp"
      contentWidth="smallMedium"
      sizing="largeSmallSizeLargeTitles"
      background="animatedGrid"
      cardStyle="gradient-mesh"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="minimal"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleMinimal
          brandName="Bimbim v pope DUM"
          button={{
            text: "Enroll Now",
            href: "#contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboardSplit
          logoText="BIMBIM DUM"
          description="Master IT skills through hands-on training. Learn from industry experts, gain certifications, and launch your tech career."
          buttons={[
            { text: "Start Learning", href: "#courses" },
            { text: "View Programs", href: "#pricing" }
          ]}
          layoutOrder="default"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766740377778-y236jb6n.jpg"
          imageAlt="Bimbim v pope DUM IT School Classroom"
          frameStyle="browser"
        />
      </div>

      <div id="about" data-section="about">
        <InlineImageSplitTextAbout
          heading={[
            { type: "text", content: "We empower aspiring IT professionals through quality" },
            { type: "text", content: "education and practical experience" }
          ]}
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Learn Our Story", href: "#" }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardSix
          title="Our Learning Journey"
          description="Follow our structured 4-step process designed to transform you into a skilled IT professional"
          tag="Process"
          features={[
            {
              id: 1,
              title: "Research & Planning",
              description: "Understand your learning goals and assess your current skill level. We create a personalized learning roadmap for your IT journey.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766740378911-c6vh3rnf.jpg",
              imageAlt: "Research and planning illustration"
            },
            {
              id: 2,
              title: "Development & Training",
              description: "Learn from experienced instructors with real-world industry experience. Hands-on coding exercises and practical projects.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766740379785-9u0mz5l7.jpg",
              imageAlt: "Development and training illustration"
            },
            {
              id: 3,
              title: "Testing & Practice",
              description: "Reinforce your skills through comprehensive assessments, mock interviews, and project-based challenges.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766740380610-wy8bcbbf.jpg",
              imageAlt: "Testing and practice illustration"
            },
            {
              id: 4,
              title: "Deployment & Success",
              description: "Launch your career with job placement support, portfolio building, and continuous career guidance from our mentors.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766740381416-d6ix7st2.jpg",
              imageAlt: "Deployment and success illustration"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="courses" data-section="courses">
        <ProductCardFour
          title="Featured IT Courses"
          description="Choose from our comprehensive selection of IT courses designed for all skill levels"
          tag="Courses"
          products={[
            {
              id: "web-dev",
              name: "Web Development Bootcamp",
              price: "$299",
              variant: "HTML, CSS, JavaScript, React",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766492695669-hy749o3o.jpg",
              imageAlt: "Web Development Course"
            },
            {
              id: "python-prog",
              name: "Python Programming Mastery",
              price: "$249",
              variant: "Beginner to Advanced",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766740382604-lxm5r8ne.jpg",
              imageAlt: "Python Programming Course"
            },
            {
              id: "data-science",
              name: "Data Science Fundamentals",
              price: "$349",
              variant: "Analytics & Machine Learning",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766492694761-e96hadsf.jpg",
              imageAlt: "Data Science Course"
            }
          ]}
          textboxLayout="default"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardThree
          title="Choose Your Learning Plan"
          description="Select the perfect plan to start your IT education journey"
          tag="Pricing"
          plans={[
            {
              id: "starter",
              price: "$199",
              name: "Starter Plan",
              buttons: [
                { text: "Get Started", href: "#contact" }
              ],
              features: [
                "1 course access",
                "Basic community support",
                "3 months access",
                "Certificate of completion"
              ]
            },
            {
              id: "professional",
              badge: "Most Popular",
              badgeIcon: Sparkles,
              price: "$499",
              name: "Professional Plan",
              buttons: [
                { text: "Get Started", href: "#contact" }
              ],
              features: [
                "All courses access",
                "1-on-1 mentor support",
                "12 months access",
                "Job placement assistance",
                "Certification tracks"
              ]
            },
            {
              id: "enterprise",
              price: "$999",
              name: "Enterprise Plan",
              buttons: [
                { text: "Contact Sales", href: "#contact" }
              ],
              features: [
                "Unlimited course access",
                "Dedicated instructor",
                "Lifetime access",
                "Priority job placement",
                "Corporate training options"
              ]
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardSix
          title="Meet Our Expert Instructors"
          description="Learn from industry professionals with years of IT experience"
          tag="Team"
          members={[
            {
              id: "1",
              name: "Alex Johnson",
              role: "Web Development Lead",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766672732968-aww7it2l.jpg",
              imageAlt: "Alex Johnson - Web Development Lead"
            },
            {
              id: "2",
              name: "Sarah Chen",
              role: "Python & Data Science Instructor",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766740383665-y2mozfdq.jpg",
              imageAlt: "Sarah Chen - Python & Data Science Instructor"
            },
            {
              id: "3",
              name: "Michael Rodriguez",
              role: "DevOps & Cloud Computing Specialist",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766672733745-z17sze1s.jpg",
              imageAlt: "Michael Rodriguez - DevOps & Cloud Computing Specialist"
            },
            {
              id: "4",
              name: "Emma Williams",
              role: "Career Services Director",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766672735551-zee5mm98.jpg",
              imageAlt: "Emma Williams - Career Services Director"
            }
          ]}
          textboxLayout="default"
          gridVariant="four-items-2x2-equal-grid"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardOne
          title="Student Success Stories"
          description="Real results from students who transformed their careers through Bimbim v pope DUM"
          tag="Testimonials"
          testimonials={[
            {
              id: "1",
              name: "Raj Patel",
              role: "Junior Developer",
              company: "Tech Startup Inc",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766740384879-97bzkqrb.jpg",
              imageAlt: "Raj Patel - Junior Developer"
            },
            {
              id: "2",
              name: "Lisa Martinez",
              role: "Data Analyst",
              company: "Data Solutions Co",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484712325-ocj12p51.jpg",
              imageAlt: "Lisa Martinez - Data Analyst"
            },
            {
              id: "3",
              name: "James Wilson",
              role: "Full Stack Engineer",
              company: "Digital Ventures",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766494979130-y5xz3d1f.jpg",
              imageAlt: "James Wilson - Full Stack Engineer"
            },
            {
              id: "4",
              name: "Nina Okafor",
              role: "Python Developer",
              company: "Cloud Systems Ltd",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484716089-kpbfo3ho.jpg",
              imageAlt: "Nina Okafor - Python Developer"
            },
            {
              id: "5",
              name: "Daniel Kim",
              role: "Web Developer",
              company: "Frontend Studios",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484695254-p59fsyqd.jpg",
              imageAlt: "Daniel Kim - Web Developer"
            },
            {
              id: "6",
              name: "Sophie Anderson",
              role: "DevOps Engineer",
              company: "Cloud Tech Solutions",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484718833-8686x51w.jpg",
              imageAlt: "Sophie Anderson - DevOps Engineer"
            }
          ]}
          textboxLayout="default"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitText
          sideTitle="Frequently Asked Questions"
          sideDescription="Everything you need to know about our IT programs and enrollment process"
          textPosition="left"
          useInvertedBackground="noInvert"
          faqs={[
            {
              id: "1",
              title: "What prior experience do I need?",
              content: "Our courses are designed for all skill levels. We offer beginner-friendly programs that require no prior IT experience, as well as advanced courses for experienced professionals."
            },
            {
              id: "2",
              title: "How long are the courses?",
              content: "Course duration varies from 8 weeks to 12 months depending on the program intensity and your learning pace. Most courses offer flexible scheduling to accommodate working professionals."
            },
            {
              id: "3",
              title: "Do you offer job placement assistance?",
              content: "Yes! Our Professional and Enterprise plans include comprehensive job placement support, resume building, interview coaching, and connections with hiring partners in the tech industry."
            },
            {
              id: "4",
              title: "Are certificates recognized by employers?",
              content: "Our certificates are recognized across the industry and valued by employers. Many students have successfully landed jobs using their Bimbim certifications as credentials."
            },
            {
              id: "5",
              title: "What is the refund policy?",
              content: "We offer a 14-day money-back guarantee for new enrollments. If you're not satisfied with the course, contact our support team for a full refund."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to transform your IT career? Enroll today and join thousands of successful graduates."
          animationType="reveal-blur"
          buttons={[
            { text: "Enroll Now", href: "#pricing" },
            { text: "Schedule Demo", href: "mailto:info@bimbim.edu" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSplit
          logoText="Bimbim v pope DUM"
          title="Empowering the next generation of IT professionals"
          columns={[
            {
              title: "Programs",
              items: [
                { label: "Web Development", href: "#courses" },
                { label: "Python Programming", href: "#courses" },
                { label: "Data Science", href: "#courses" }
              ]
            },
            {
              title: "Company",
              items: [
                { label: "About Us", href: "#about" },
                { label: "Our Team", href: "#team" },
                { label: "Careers", href: "#contact" }
              ]
            },
            {
              title: "Support",
              items: [
                { label: "FAQ", href: "#faq" },
                { label: "Contact Us", href: "#contact" },
                { label: "Terms of Service", href: "#" }
              ]
            }
          ]}
          contactItems={[
            { icon: Phone, text: "+1 (555) 123-4567" },
            { icon: Mail, text: "info@bimbim.edu" },
            { icon: MapPin, text: "123 Tech Street, Innovation City" }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}