"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import FaqBase from '@/components/sections/faq/FaqBase';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Linkedin, Globe, Github } from "lucide-react";
import TextAbout from '@/components/sections/about/TextAbout';
import TagAbout from '@/components/sections/about/TagAbout';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="reveal-blur"
      borderRadius="sharp"
      contentWidth="small"
      sizing="mediumLargeSizeLargeTitles"
      background="floatingGradient"
      cardStyle="solid"
      primaryButtonStyle="flat"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="IT Academy"
          navItems={[
            { name: "Home", id: "hero" },
            { name: "Courses", id: "features" },
            { name: "Team", id: "team" },
            { name: "FAQ", id: "faq" }
          ]}
          button={{
            text: "Enroll Now",            href: "contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboardSplit
          logoText="IT ACADEMY"
          description="Master in-demand tech skills with industry experts. Learn web development, data science, cybersecurity, and more. Start your coding journey today."
          background={{ variant: "radial-gradient" }}
          buttons={[
            { text: "Enroll Now", href: "#contact" },
            { text: "View Courses", href: "#features" }
          ]}
          layoutOrder="default"
          imageSrc="https://img.b2bpic.net/free-photo/person-computing-software-code-laptop_482257-85707.jpg"
          imageAlt="Student coding on laptop"
          frameStyle="browser"
        />
      </div>

      <div id="text_about" data-section="text_about">
        <TextAbout
          title="Why Choose IT Academy?"
          buttons={[{ label: "Explore Courses", href: "#" }, { label: "Meet Our Team", href: "#" }]}
          useInvertedBackground="[useInvertedBackground]"
        />
      </div>

      <div id="tag_about" data-section="tag_about">
        <TagAbout
          title="About IT Academy"
        />
      </div>      <div id="about" data-section="about">
        <InlineImageSplitTextAbout
          heading={[
            { type: "text", content: "Transforming careers through" },
            { type: "text", content: "quality tech education" }
          ]}
          buttons={[
            { text: "Learn More", href: "#features" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardMedia
          title="Our Courses & Curriculum"
          description="Comprehensive programs designed to prepare you for real-world tech careers"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          features={[
            {
              id: "1",              title: "Web Development",              description: "Learn HTML, CSS, JavaScript, React, and modern web frameworks. Build responsive, dynamic web applications from scratch.",              tag: "Popular",              imageSrc: "https://img.b2bpic.net/free-photo/computer-program-coding-screen_53876-138060.jpg",              buttons: [{ text: "Explore Course", href: "#" }]
            },
            {
              id: "2",              title: "Data Science & Analytics",              description: "Master Python, SQL, machine learning, and data visualization. Turn data into actionable insights for business.",              tag: "In-Demand",              imageSrc: "https://img.b2bpic.net/free-photo/programming-background-with-html-text_23-2150040420.jpg",              buttons: [{ text: "Explore Course", href: "#" }]
            },
            {
              id: "3",              title: "Cybersecurity Essentials",              description: "Understand security protocols, threat analysis, and ethical hacking. Protect systems and networks from vulnerabilities.",              tag: "Essential",              imageSrc: "https://img.b2bpic.net/free-photo/side-shot-code-editor-using-react-js_181624-61842.jpg",              buttons: [{ text: "Explore Course", href: "#" }]
            }
          ]}
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardTwo
          title="Meet Our Instructors"
          description="Learn from experienced professionals with years of industry expertise"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          gridVariant="uniform-all-items-equal"
          members={[
            {
              id: "1",              name: "Sarah Chen",              role: "Lead Web Dev Instructor",              description: "10+ years in full-stack development. Former tech lead at major startups.",              imageSrc: "https://img.b2bpic.net/free-photo/dark-blonde-bearded-man-crosses-his-hands-chest-posing-black-shirt_8353-1116.jpg",              socialLinks: [
                { icon: Linkedin, url: "https://linkedin.com" },
                { icon: Globe, url: "https://example.com" }
              ]
            },
            {
              id: "2",              name: "Marcus Johnson",              role: "Data Science Expert",              description: "PhD in Computer Science. Published researcher in machine learning applications.",              imageSrc: "https://img.b2bpic.net/free-photo/low-angle-businessman_23-2148825893.jpg",              socialLinks: [
                { icon: Linkedin, url: "https://linkedin.com" },
                { icon: Github, url: "https://github.com" }
              ]
            },
            {
              id: "3",              name: "Emily Rodriguez",              role: "Cybersecurity Specialist",              description: "Certified ethical hacker. 8+ years securing enterprise infrastructure.",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-happy-confident-young-businessman-with-arm-crossed-holding-mobile-phone-hand_23-2148096508.jpg",              socialLinks: [
                { icon: Linkedin, url: "https://linkedin.com" },
                { icon: Globe, url: "https://example.com" }
              ]
            },
            {
              id: "4",              name: "David Kim",              role: "Curriculum Director",              description: "Former engineering manager. Designs cutting-edge tech education programs.",              imageSrc: "https://img.b2bpic.net/free-photo/caucasian-brunette-male-portrait_158595-7921.jpg",              socialLinks: [
                { icon: Linkedin, url: "https://linkedin.com" },
                { icon: Github, url: "https://github.com" }
              ]
            }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardTwo
          title="Student Success Stories"
          description="Real results from our comprehensive training programs"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          gridVariant="uniform-all-items-equal"
          metrics={[
            {
              id: "1",              value: "95%",              description: "Job Placement Rate"
            },
            {
              id: "2",              value: "2500+",              description: "Graduates Employed"
            },
            {
              id: "3",              value: "4.8/5",              description: "Student Satisfaction"
            },
            {
              id: "4",              value: "50K+",              description: "Average Starting Salary"
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardOne
          title="What Our Graduates Say"
          description="Real feedback from students who transformed their careers"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          gridVariant="uniform-all-items-equal"
          testimonials={[
            {
              id: "1",              name: "Alex Martinez",              role: "Junior Developer",              company: "TechCorp Solutions",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/man-portrait_1296-491.jpg"
            },
            {
              id: "2",              name: "Jessica Lee",              role: "Data Analyst",              company: "DataInsights Inc",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/business-man-working-late-office_23-2148991382.jpg"
            },
            {
              id: "3",              name: "Robert Chang",              role: "Security Engineer",              company: "CloudSecure",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/business-concept-portrait-handsome-serious-business-man-suit-looking-work-laptop-white-background_1258-103931.jpg"
            },
            {
              id: "4",              name: "Maria Santos",              role: "Full Stack Developer",              company: "StartupXYZ",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-handsome-bearded-male-wearing-stylish-suit-listeni_613910-1578.jpg"
            },
            {
              id: "5",              name: "James Wilson",              role: "Frontend Specialist",              company: "DesignStudio Pro",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/man-portrait-posing-loft-modern-space_158595-5365.jpg"
            },
            {
              id: "6",              name: "Nina Patel",              role: "ML Engineer",              company: "AI Innovations",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/businessman-wearing-coat_1098-3778.jpg"
            }
          ]}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqBase
          title="Frequently Asked Questions"
          description="Find answers to common questions about our courses and enrollment"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="smooth"
          showCard={true}
          faqs={[
            {
              id: "1",              title: "What prior experience do I need?",              content: "Our courses are designed for beginners through intermediate learners. While basic computer literacy is helpful, most courses start from fundamentals and progress gradually. We provide comprehensive support for all skill levels."
            },
            {
              id: "2",              title: "How long are the courses?",              content: "Course duration varies: Web Development (12 weeks), Data Science (14 weeks), Cybersecurity (10 weeks). All courses are full-time, Monday through Friday, 9 AM to 5 PM. Flexible evening and weekend options are also available."
            },
            {
              id: "3",              title: "Is job placement assistance provided?",              content: "Yes! We provide dedicated career support including resume review, interview coaching, LinkedIn optimization, and direct connections with our network of hiring partners. Our 95% job placement rate speaks to the quality of this support."
            },
            {
              id: "4",              title: "What is your refund policy?",              content: "We offer a 14-day money-back guarantee if you're not satisfied with the course. If you withdraw within two weeks of starting, you'll receive a full refund. After two weeks, refunds are prorated based on completion."
            },
            {
              id: "5",              title: "Do you offer payment plans?",              content: "Absolutely! We offer flexible payment plans to make education accessible. Options include monthly installments, corporate sponsorships, and income-share agreements where you pay a percentage of your salary after employment."
            },
            {
              id: "6",              title: "Will I get a certificate?",              content: "Yes, upon completion you'll receive an industry-recognized certificate. You'll also build a portfolio of real projects that demonstrates your skills to potential employers."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Ready to Start Your Tech Career?"
          description="Join hundreds of students who have transformed their careers with our comprehensive tech education. Fill out the form below and our enrollment team will contact you within 24 hours."
          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: "course",              type: "text",              placeholder: "Preferred Course (Web Dev, Data Science, Cybersecurity)",              required: true
            }
          ]}
          textarea={{
            name: "message",            placeholder: "Tell us about your background and career goals...",            rows: 5,
            required: false
          }}
          useInvertedBackground="noInvert"
          imageSrc="https://img.b2bpic.net/free-photo/young-businesswoman-talking-cellphone-office_23-2147843628.jpg"
          imageAlt="IT Academy team collaboration"
          mediaPosition="right"
          buttonText="Request Information"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="IT Academy"
          columns={[
            {
              title: "Courses",              items: [
                { label: "Web Development", href: "#features" },
                { label: "Data Science", href: "#features" },
                { label: "Cybersecurity", href: "#features" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#about" },
                { label: "Meet Our Instructors", href: "#team" },
                { label: "Success Stories", href: "#metrics" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "FAQ", href: "#faq" },
                { label: "Blog", href: "#" },
                { label: "Student Portal", href: "#" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Terms of Service", href: "#" },
                { label: "Privacy Policy", href: "#" },
                { label: "Cookie Policy", href: "#" }
              ]
            }
          ]}
          copyrightText="© 2025 IT Academy. All rights reserved. Empowering the next generation of tech professionals."
        />
      </div>
    </ThemeProvider>
  );
}