"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import SplitAboutMetric from '@/components/sections/about/SplitAboutMetric';
import FeatureCardEighteen from '@/components/sections/feature/FeatureCardEighteen';
import ProductCardSeven from '@/components/sections/product/ProductCardSeven';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Sparkles, CheckCircle, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="sharp"
      contentWidth="mediumSmall"
      sizing="largeSmallSizeMediumTitles"
      background="fluid"
      cardStyle="solid"
      primaryButtonStyle="layered-depth"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered 
          brandName="Baran"
          navItems={[
            { name: "About", id: "about" },
            { name: "Courses", id: "courses" },
            { name: "Why Baran", id: "features" },
            { name: "Students", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Enroll Now", href: "contact" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardGallery
          title="Launch Your IT Career"
          description="Master cutting-edge technologies and land your dream job in tech. Join Baran and transform your future."
          tag="Best IT Institute"
          tagIcon={Sparkles}
          buttons={[
            { text: "Start Learning", href: "courses" },
            { text: "Explore Programs", href: "features" }
          ]}
          mediaItems={[
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484694244-h6z6ypcz.jpg", imageAlt: "Classroom with students learning" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484695254-p59fsyqd.jpg", imageAlt: "IT lab with computers and coding" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484693438-07rkdlqa.jpg", imageAlt: "Successful students graduating" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484714329-4i8nds16.jpg", imageAlt: "Modern IT workspace" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766494973168-mwn1lqco.jpg", imageAlt: "Students collaborating together" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <SplitAboutMetric
          title="Leading IT Education Since 2015"
          description={[
            "Baran has been dedicated to providing world-class IT education and training. We focus on practical, industry-relevant skills that prepare students for real-world challenges. Our experienced instructors and hands-on approach ensure every student graduates job-ready."
          ]}
          metrics={[
            { label: "Students Graduated", value: "5000+" },
            { label: "Job Placement Rate", value: "94%" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardEighteen
          title="Why Choose Baran"
          description="See how Baran stands out from traditional IT training centers"
          tag="Our Advantage"
          tagIcon={CheckCircle}
          negativeCard={{
            title: "Traditional Centers",
            items: [
              "Outdated curriculum",
              "Limited hands-on projects",
              "Generic approach",
              "No industry connections",
              "Slow job placement"
            ],
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766919186738-0sgjxzsv.jpg",
            imageAlt: "Traditional classroom setup"
          }}
          positiveCard={{
            title: "Baran Academy",
            items: [
              "Latest technology stack",
              "Real-world projects",
              "Personalized mentoring",
              "Strong industry partnerships",
              "Quick job placement"
            ],
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766919187648-cixg9l8o.jpg",
            imageAlt: "Modern IT lab at Baran"
          }}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="courses" data-section="courses">
        <ProductCardSeven
          title="Our Courses"
          description="Choose from our comprehensive range of IT programs designed for all skill levels"
          tag="Popular Programs"
          tagIcon={Zap}
          products={[
            {
              id: "1",
              name: "Web Development",
              price: "₹35,000",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766494974186-q9l6jbqi.jpg",
              imageAlt: "Web development course"
            },
            {
              id: "2",
              name: "Mobile App Development",
              price: "₹42,000",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766494975050-7ahm4emg.jpg",
              imageAlt: "Mobile app development course"
            },
            {
              id: "3",
              name: "Data Science & Analytics",
              price: "₹48,000",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766919188576-8s96k0zb.jpg",
              imageAlt: "Data science course"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFifteen
          testimonial="Baran completely changed my career path. The instructors were incredibly supportive, and the practical training made me job-ready. I got placed within a month of graduation!"
          rating={5}
          author="Priya Sharma, Web Developer"
          avatars={[
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484714329-4i8nds16.jpg", alt: "Priya Sharma" },
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766492698706-udp5pns4.jpg", alt: "Student testimonial" },
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766743064968-mn7r0vxe.jpg", alt: "Graduate success" },
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766743065834-k1ycryfc.jpg", alt: "Happy student" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardFourteen
          title="Baran By The Numbers"
          tag="Our Impact"
          metrics={[
            {
              id: "1",
              value: "5000+",
              description: "Students successfully trained and graduated"
            },
            {
              id: "2",
              value: "94%",
              description: "Job placement rate within 3 months"
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Ready to Transform Your Career?"
          description="Get in touch with us today. Our admissions team will help you choose the right program and answer all your questions."
          inputs={[
            { name: "fullName", type: "text", placeholder: "Full Name", required: true },
            { name: "email", type: "email", placeholder: "Email Address", required: true },
            { name: "phone", type: "tel", placeholder: "Phone Number", required: true },
            { name: "interest", type: "text", placeholder: "Interested Program", required: false }
          ]}
          textarea={{ name: "message", placeholder: "Tell us about your goals...", rows: 5, required: false }}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766919189514-772nczx3.jpg"
          imageAlt="Baran office consultation"
          mediaPosition="right"
          buttonText="Send Inquiry"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766494976181-onrupp9y.jpg"
          imageAlt="Baran IT Academy campus"
          logoText="Baran"
          copyrightText="© 2024 Baran IT Academy. All rights reserved."
          columns={[
            {
              title: "Programs",
              items: [
                { label: "Web Development", href: "courses" },
                { label: "Mobile Development", href: "courses" },
                { label: "Data Science", href: "courses" }
              ]
            },
            {
              title: "About",
              items: [
                { label: "Our Story", href: "about" },
                { label: "Why Choose Us", href: "features" },
                { label: "Student Reviews", href: "testimonials" }
              ]
            },
            {
              title: "Contact",
              items: [
                { label: "Get In Touch", href: "contact" },
                { label: "Location", href: "#" },
                { label: "Phone", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}