"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import MediaAbout from '@/components/sections/about/MediaAbout';
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import TeamCardEleven from '@/components/sections/team/TeamCardEleven';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Sparkles, Users, Zap, DollarSign, Briefcase, Star, Heart, Mail, Github, Linkedin, Twitter } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="slide-background"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="mediumSmall"
      sizing="mediumLargeSizeMediumTitles"
      background="none"
      cardStyle="inset"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="TechVision"
          navItems={[
            { name: "About", id: "about" },
            { name: "Services", id: "features" },
            { name: "Pricing", id: "pricing" },
            { name: "Team", id: "team" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Get Started", href: "#contact" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardRotatedCarousel
          title="Transform Your Business with Cutting-Edge IT Solutions"
          description="We deliver innovative software development, cloud infrastructure, and digital transformation services to help your startup scale faster and smarter."
          tag="Innovation & Excellence"
          tagIcon={Sparkles}
          background={{ variant: "plain" }}
          buttons={[
            { text: "Start Your Project", href: "#contact" },
            { text: "Explore Services", href: "#features" }
          ]}
          carouselItems={[
            { id: "1", imageSrc: "https://img.b2bpic.net/free-photo/person-computing-software-code-laptop_482257-85707.jpg", imageAlt: "Software development and coding" },
            { id: "2", imageSrc: "https://img.b2bpic.net/free-photo/side-view-attractive-hispanic-developer-programming-software-using-computer-while-working-from-home_662251-988.jpg", imageAlt: "Cloud computing infrastructure" },
            { id: "3", imageSrc: "https://img.b2bpic.net/free-photo/teleworker-using-laptop-coding-software-developing_482257-124274.jpg", imageAlt: "AI and machine learning solutions" },
            { id: "4", imageSrc: "https://img.b2bpic.net/free-photo/male-programmer-coding-laptop_482257-87912.jpg", imageAlt: "Cybersecurity and data protection" },
            { id: "5", imageSrc: "https://img.b2bpic.net/free-photo/man-working-energy-innovations_23-2148820171.jpg", imageAlt: "Mobile app development" },
            { id: "6", imageSrc: "https://img.b2bpic.net/free-photo/african-american-engineer-programming-app-code-developing-online-software-with-cloud-server-firewall-security-coding-new-user-interface-with-binary-code-html-program-web-development_482257-49867.jpg", imageAlt: "Web development and design" }
          ]}
          autoPlay={true}
          autoPlayInterval={4000}
        />
      </div>

      <div id="about" data-section="about">
        <MediaAbout
          title="Who We Are"
          description="TechVision is a forward-thinking IT company founded by industry veterans passionate about delivering exceptional digital solutions. We combine technical expertise, creative thinking, and agile methodologies to help startups and enterprises achieve their ambitious goals. Our team of 30+ talented engineers, designers, and strategists work collaboratively to turn complex challenges into elegant, scalable solutions."
          tag="About Our Team"
          tagIcon={Users}
          imageSrc="https://img.b2bpic.net/free-photo/close-up-young-business-team-working_23-2149153839.jpg"
          imageAlt="TechVision team collaborating in office"
          useInvertedBackground="invertDefault"
          buttons={[
            { text: "Learn More", href: "#team" },
            { text: "View Careers", href: "#contact" }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardSix
          title="Our Development Process"
          description="We follow a proven methodology that ensures quality, transparency, and timely delivery for every project."
          tag="How We Work"
          tagIcon={Zap}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          buttons={[{ text: "Get Started", href: "#contact" }]}
          features={[
            {
              id: 1,
              title: "Discovery & Planning",              description: "We begin with comprehensive discovery sessions to understand your business goals, technical requirements, and user needs. Our team conducts competitive analysis and creates a detailed project roadmap.",              imageSrc: "https://img.b2bpic.net/free-photo/man-working-energy-innovations-his-laptop_23-2148820170.jpg",              imageAlt: "Discovery and planning phase"
            },
            {
              id: 2,
              title: "Design & Architecture",              description: "Our designers and architects collaborate to create intuitive user experiences and scalable technical architectures. We present prototypes and wireframes for your approval before development begins.",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-man-writing-code-laptop_158595-5166.jpg",              imageAlt: "Design and architecture phase"
            },
            {
              id: 3,
              title: "Development & Integration",              description: "Our experienced developers build your solution using cutting-edge technologies and best practices. We maintain regular communication and provide progress updates throughout the development cycle.",              imageSrc: "https://img.b2bpic.net/free-photo/closeup-programer-hands-typing-machine-learning-code-laptop-keyboard-front-computer-screens-with-programming-interface-system-engineer-writing-algorithm-online-cloud-computing_482257-41853.jpg",              imageAlt: "Development and integration phase"
            },
            {
              id: 4,
              title: "Testing & Launch",              description: "We conduct rigorous quality assurance testing to ensure performance, security, and reliability. Once approved, we handle the deployment and provide post-launch support to ensure smooth operations.",              imageSrc: "https://img.b2bpic.net/free-photo/african-american-software-engineer-works-laptop-typing-code-project_482257-112596.jpg",              imageAlt: "Testing and launch phase"
            }
          ]}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardFive
          title="Flexible Pricing Plans"
          description="Choose the engagement model that best suits your project needs and budget."
          tag="Transparent Pricing"
          tagIcon={DollarSign}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="slide-up"
          plans={[
            {
              id: "project-based",              tag: "Project-Based Engagement",              tagIcon: Briefcase,
              price: "$15,000",              period: "per project",              description: "Perfect for startups with defined scope and timeline. Ideal for MVP development or feature implementations.",              button: { text: "Get Quote", href: "#contact" },
              featuresTitle: "What's Included:",              features: [
                "Full project lifecycle management",                "Up to 3 rounds of revisions",                "30-day post-launch support",                "Technical documentation",                "Source code ownership"
              ]
            },
            {
              id: "dedicated-team",              tag: "Dedicated Team",              tagIcon: Users,
              price: "$8,500",              period: "/month",              description: "Extend your team with dedicated developers. Best for ongoing development and scaling projects.",              button: { text: "Book Consultation", href: "#contact" },
              featuresTitle: "What's Included:",              features: [
                "1-3 dedicated full-time developers",                "Flexible scoping and adjustments",                "Weekly progress meetings",                "Continuous deployment setup",                "Maintenance and support included"
              ]
            },
            {
              id: "retainer",              tag: "Monthly Retainer",              tagIcon: Star,
              price: "$5,000",              period: "/month",              description: "Ongoing technical support and development for established products. Maintain and improve your existing applications.",              button: { text: "Start Retainer", href: "#contact" },
              featuresTitle: "What's Included:",              features: [
                "40 hours of development time",                "Priority support (24-48 hours)",                "Bug fixes and optimization",                "Performance monitoring",                "Technology updates and upgrades"
              ]
            }
          ]}
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardEleven
          title="Meet Our Leadership Team"
          description="Experienced technologists and business leaders dedicated to your success."
          tag="Our Team"
          tagIcon={Users}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          groups={[
            {
              id: "leadership",              groupTitle: "Leadership",              members: [
                {
                  id: "1",                  title: "Alex Chen",                  subtitle: "CEO & Founder",                  detail: "alex@techvision.io",                  imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",                  imageAlt: "Alex Chen, CEO"
                },
                {
                  id: "2",                  title: "Sarah Williams",                  subtitle: "CTO & Co-Founder",                  detail: "sarah@techvision.io",                  imageSrc: "https://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg",                  imageAlt: "Sarah Williams, CTO"
                },
                {
                  id: "3",                  title: "Michael Rodriguez",                  subtitle: "VP Product",                  detail: "michael@techvision.io",                  imageSrc: "https://img.b2bpic.net/free-photo/handsome-groom-classy-black-suit-stands-dark-room_8353-7083.jpg",                  imageAlt: "Michael Rodriguez, VP Product"
                }
              ]
            },
            {
              id: "core-team",              groupTitle: "Core Team",              members: [
                {
                  id: "4",                  title: "Emma Johnson",                  subtitle: "Lead Designer",                  detail: "emma@techvision.io",                  imageSrc: "https://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg",                  imageAlt: "Emma Johnson, Lead Designer"
                },
                {
                  id: "5",                  title: "David Kumar",                  subtitle: "Senior Full-Stack Developer",                  detail: "david@techvision.io",                  imageSrc: "https://img.b2bpic.net/free-photo/portrait-grey-haired-businessman-standing_74855-10324.jpg",                  imageAlt: "David Kumar, Senior Developer"
                },
                {
                  id: "6",                  title: "James Patterson",                  subtitle: "Sales & Business Development",                  detail: "james@techvision.io",                  imageSrc: "https://img.b2bpic.net/free-photo/smiling-businessman-standing-airport-terminal_107420-85070.jpg",                  imageAlt: "James Patterson, Sales Lead"
                }
              ]
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          cardTitle="Trusted by over 50+ startups and enterprises worldwide"
          cardTag="See what our clients say"
          cardTagIcon={Heart}
          useInvertedBackground="invertDefault"
          testimonials={[
            {
              id: "1",              name: "Jennifer Martinez",              imageSrc: "https://img.b2bpic.net/free-photo/closeup-handsome-middle-aged-business-leader_1262-4822.jpg",              imageAlt: "Jennifer Martinez"
            },
            {
              id: "2",              name: "David Thompson",              imageSrc: "https://img.b2bpic.net/free-photo/positive-confident-businessman-posing-outside_74855-1183.jpg",              imageAlt: "David Thompson"
            },
            {
              id: "3",              name: "Lisa Anderson",              imageSrc: "https://img.b2bpic.net/free-photo/positive-middle-aged-business-leader-window_1262-5388.jpg",              imageAlt: "Lisa Anderson"
            },
            {
              id: "4",              name: "Robert Garcia",              imageSrc: "https://img.b2bpic.net/free-photo/closeup-happy-middle-aged-business-leader_1262-4823.jpg",              imageAlt: "Robert Garcia"
            },
            {
              id: "5",              name: "Michelle Lee",              imageSrc: "https://img.b2bpic.net/free-photo/waist-up-confident-businessman-office_329181-19349.jpg",              imageAlt: "Michelle Lee"
            },
            {
              id: "6",              name: "Christopher Brown",              imageSrc: "https://img.b2bpic.net/free-photo/smiling-middle-aged-business-leader-window_1262-5674.jpg",              imageAlt: "Christopher Brown"
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Get In Touch"
          title="Ready to Start Your Project?"
          description="Connect with our team to discuss your requirements, ask questions, and get a personalized project proposal. We're excited to partner with you."
          useInvertedBackground="noInvert"
          imageSrc="https://img.b2bpic.net/free-photo/close-up-young-business-team-working_23-2149153838.jpg"
          imageAlt="Customer support team"
          mediaPosition="right"
          tagIcon={Mail}
          inputPlaceholder="your@email.com"
          buttonText="Send Message"
          termsText="We respect your privacy. We'll only use your email to send project details and follow-up information."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="TechVision"
          copyrightText="© 2025 TechVision. All rights reserved."
          socialLinks={[
            { icon: Github, href: "https://github.com", ariaLabel: "GitHub" },
            { icon: Linkedin, href: "https://linkedin.com", ariaLabel: "LinkedIn" },
            { icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter" }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}