"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Briefcase, Mail, Star, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="medium"
      sizing="mediumSizeLargeTitles"
      background="plain"
      cardStyle="gradient-mesh"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="solid"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Home", id: "hero" },
            { name: "How It Works", id: "features" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" },
            { name: "Browse Jobs", id: "https://jobs.example.com" }
          ]}
          brandName="NestHub"
          bottomLeftText="NestJS Community"
          bottomRightText="careers@nesthub.dev"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardScroll
          title="Find Your Next NestJS Job"
          description="Join a growing community of backend developers and land your dream role with top tech companies"
          tag="Discover Opportunities"
          imageSrc="https://img.b2bpic.net/free-photo/african-american-software-developer-does-visual-coding-creating-software_482257-127024.jpg"
          imageAlt="NestJS developer dashboard interface"
          buttons={[
            { text: "Search Jobs", href: "https://jobs.example.com" },
            { text: "Learn More", href: "features" }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardSix
          title="How NestHub Works"
          description="A seamless platform connecting NestJS developers with their ideal roles"
          tag="Process"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          features={[
            {
              id: 1,
              title: "Create Your Profile",              description: "Build a comprehensive developer profile showcasing your NestJS expertise, experience level, and career goals.",              imageSrc: "https://img.b2bpic.net/free-photo/online-job-search-website-worker-search-job-opportunities_169016-39045.jpg"
            },
            {
              id: 2,
              title: "Smart Job Matching",              description: "Our algorithm matches you with curated NestJS roles that align with your skills and career aspirations.",              imageSrc: "https://img.b2bpic.net/free-photo/volleyball-players-having-match_23-2149492355.jpg"
            },
            {
              id: 3,
              title: "Accelerate Your Career",              description: "Connect with top tech companies, secure competitive compensation, and achieve work-life balance.",              imageSrc: "https://img.b2bpic.net/free-photo/career-employment-job-work-concept_53876-123876.jpg"
            }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <TestimonialAboutCard
          tag="About NestHub"
          tagIcon={Briefcase}
          title="Connecting Backend Talent with Innovation"
          description="For NestJS Developers"
          subdescription="Where Career Growth Meets Opportunity"
          icon={Zap}
          imageSrc="https://img.b2bpic.net/free-photo/team-developers-doing-brainstorming-optimizing-code_482257-112972.jpg"
          imageAlt="NestJS development team collaborating"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwo
          title="Success Stories from Our Community"
          description="Hear from developers who found their ideal NestJS roles through NestHub"
          tag="Testimonials"
          tagIcon={Star}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="slide-up"
          testimonials={[
            {
              id: "1",              name: "Alex Chen",              role: "Senior Backend Developer",              testimonial: "NestHub connected me with a role that perfectly aligned with my NestJS expertise. The matching algorithm is incredibly accurate and saved me months of searching.",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-exhausted-workaholic-man-manager-typing-financial-strategy-using-laptop-computer-while-sitting-desk-table-business-company-office_482257-2321.jpg",              imageAlt: "Portrait of Alex Chen"
            },
            {
              id: "2",              name: "Sarah Williams",              role: "Full Stack Engineer",              testimonial: "I found a remote position with great compensation within two weeks. The platform is intuitive and the support from the NestHub team is outstanding.",              imageSrc: "https://img.b2bpic.net/free-photo/business-man-working-late-office_23-2148991382.jpg",              imageAlt: "Portrait of Sarah Williams"
            },
            {
              id: "3",              name: "Marcus Johnson",              role: "Tech Lead",              testimonial: "As a tech recruiter, NestHub's pool of qualified NestJS developers has been invaluable. We've hired three exceptional engineers through this platform.",              imageSrc: "https://img.b2bpic.net/free-photo/medium-shot-man-typing-keyboard_23-2149101167.jpg",              imageAlt: "Portrait of Marcus Johnson"
            },
            {
              id: "4",              name: "Emma Rodriguez",              role: "Backend Architect",              testimonial: "The job board is specifically curated for NestJS roles, which means no wasted time filtering through irrelevant positions. Highly recommend for serious developers.",              imageSrc: "https://img.b2bpic.net/free-photo/low-angle-businessman_23-2148825893.jpg",              imageAlt: "Portrait of Emma Rodriguez"
            }
          ]}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Frequently Asked Questions"
          description="Everything you need to know about finding your next NestJS opportunity"
          tag="Help"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
          faqs={[
            {
              id: "1",              title: "How do I create a developer profile?",              content: "Simply sign up, fill in your NestJS experience, skills, and career preferences. Our team will review your profile to ensure quality matches with employers seeking backend talent."
            },
            {
              id: "2",              title: "Is there a cost to use NestHub for job seekers?",              content: "No, NestHub is completely free for developers. We're committed to helping the NestJS community connect with opportunities without barriers."
            },
            {
              id: "3",              title: "How are jobs matched to my profile?",              content: "Our AI-powered matching algorithm considers your skill level, experience, location preferences, salary expectations, and career goals to surface the most relevant opportunities."
            },
            {
              id: "4",              title: "Can I apply to multiple jobs at once?",              content: "Yes, you can apply to as many positions as you want. Many developers apply to 3-5 roles to increase their chances of landing their ideal position."
            },
            {
              id: "5",              title: "What's the average time to get hired?",              content: "Most developers hear back from employers within 1-3 weeks. Some receive offers within days depending on how competitive the role is and how active you are."
            },
            {
              id: "6",              title: "Do you support remote positions?",              content: "Absolutely! A large portion of NestJS roles on our platform are remote or hybrid. Filter by location preference in your job search to find positions that match your lifestyle."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Newsletter"
          tagIcon={Mail}
          title="Stay Updated with New NestJS Roles"
          description="Get weekly digests of the best NestJS jobs matching your profile, industry insights, and career tips delivered to your inbox."
          useInvertedBackground="invertDefault"
          imageSrc="https://img.b2bpic.net/free-photo/african-american-software-developer-does-visual-coding-creating-software_482257-127024.jpg"
          imageAlt="NestJS job opportunities"
          mediaPosition="right"
          inputPlaceholder="Enter your email address"
          buttonText="Subscribe"
          termsText="We'll send you curated NestJS opportunities and career insights. Unsubscribe anytime."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          logoText="NestHub"
          copyrightText="© 2025 NestHub. Connecting NestJS Developers with Opportunity."
          columns={[
            {
              title: "Platform",              items: [
                { label: "Browse Jobs", href: "https://jobs.example.com" },
                { label: "How It Works", href: "features" },
                { label: "For Employers", href: "https://employers.example.com" },
                { label: "Pricing", href: "https://example.com/pricing" }
              ]
            },
            {
              title: "Community",              items: [
                { label: "Developer Resources", href: "https://example.com/resources" },
                { label: "Blog", href: "https://example.com/blog" },
                { label: "NestJS Docs", href: "https://docs.nestjs.com" },
                { label: "Discord Community", href: "https://discord.gg/nestjs" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "about" },
                { label: "Contact", href: "contact" },
                { label: "Terms of Service", href: "https://example.com/terms" },
                { label: "Privacy Policy", href: "https://example.com/privacy" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}