"use client"
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';
import HeroSplitAvatars from '@/components/sections/hero/HeroSplitAvatars';
import MediaAbout from '@/components/sections/about/MediaAbout';
import FeatureCardFifteen from '@/components/sections/feature/FeatureCardFifteen';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import TeamCardSeven from '@/components/sections/team/TeamCardSeven';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import ContactText from '@/components/sections/contact/ContactText';
import FooterSplit from '@/components/sections/footer/FooterSplit';
import { Zap, Lightbulb, Sparkles, TrendingUp, Award, Mail, Phone, MapPin } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="sharp"
      contentWidth="mediumLarge"
      sizing="largeSmallSizeMediumTitles"
      background="noiseGradient"
      cardStyle="solid"
      primaryButtonStyle="layered-depth"
      secondaryButtonStyle="layered"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleMinimal
          brandName="TechVision"
          button={{
            text: "Get Started",
            href: "contact"
          }}
          className="border-b"
          buttonClassName="px-6 py-2"
        />
      </div>
      
      <div id="hero" data-section="hero">
        <HeroSplitAvatars
          title="Build Tomorrow's Technology Today"
          description="Transform your business with cutting-edge software solutions. We empower startups and enterprises with intelligent, scalable technology that drives growth."
          tag="Innovation First"
          tagIcon={Zap}
          avatars={[
            {
              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767627484729-atc7xql3.jpg",
              alt: "Team member 1"
            },
            {
              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767627485580-mpjvb2zo.jpg",
              alt: "Team member 2"
            },
            {
              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767627486295-updfecp6.jpg",
              alt: "Team member 3"
            },
            {
              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767627487046-g74ayvgp.jpg",
              alt: "Team member 4"
            }
          ]}
          avatarText="Trusted by 200+ Companies"
          buttons={[
            {
              text: "Start Your Project",
              href: "contact"
            },
            {
              text: "View Case Studies",
              href: "#testimonials"
            }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767627493349-2t17x5aw.jpg"
          imageAlt="IT startup team collaborating"
          imagePosition="right"
        />
      </div>
      
      <div id="about" data-section="about">
        <MediaAbout
          title="Pioneering Software Excellence"
          description="At TechVision, we combine strategic innovation with technical expertise to deliver software solutions that exceed expectations. Our team of experienced developers and architects specialize in building scalable platforms that power digital transformation."
          tag="Our Story"
          tagIcon={Lightbulb}
          buttons={[
            {
              text: "Explore Our Services",
              href: "#features"
            }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767627495135-rqyggene.jpg"
          imageAlt="Technology innovation"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="features" data-section="features">
        <FeatureCardFifteen
          title="Comprehensive Technology Solutions"
          description="From AI-powered automation to cloud infrastructure, we deliver enterprise-grade solutions tailored to your needs."
          tag="Our Capabilities"
          tagIcon={Sparkles}
          features={[
            {
              id: "1",
              title: "AI & Machine Learning",
              description: "Intelligent systems that learn and adapt to your business processes",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767627496124-yohvgxk1.jpg",
              imageAlt: "AI automation platform"
            },
            {
              id: "2",
              title: "Cloud Infrastructure",
              description: "Scalable, secure, and reliable cloud solutions for any scale",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767627496921-akickgnl.jpg",
              imageAlt: "Cloud computing services"
            },
            {
              id: "3",
              title: "Data Security",
              description: "Enterprise-grade security protocols protecting your valuable data",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767627497612-x4xvmfhx.jpg",
              imageAlt: "Data security solutions"
            },
            {
              id: "4",
              title: "Advanced Analytics",
              description: "Real-time insights to drive strategic business decisions",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767627498560-5fxvimi5.jpg",
              imageAlt: "Analytics dashboard"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          buttons={[
            {
              text: "Learn More",
              href: "#contact"
            }
          ]}
        />
      </div>
      
      <div id="metrics" data-section="metrics">
        <MetricCardEleven
          title="Proven Track Record"
          description="Our impact speaks through measurable results and client success stories."
          tag="Our Impact"
          tagIcon={TrendingUp}
          metrics={[
            {
              id: "1",
              value: "200+",
              title: "Active Clients",
              description: "Growing businesses trust our solutions",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767627499832-yiwy72zw.jpg",
              imageAlt: "Client success metrics"
            },
            {
              id: "2",
              value: "500+",
              title: "Projects Delivered",
              description: "Innovative solutions shipped worldwide",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767627501003-9m8muv14.jpg",
              imageAlt: "Project completion"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="team" data-section="team">
        <TeamCardSeven
          title="Meet Our Expert Team"
          team={[
            {
              id: "1",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767627502098-50xc4u3j.jpg",
              imageAlt: "CEO and Founder"
            },
            {
              id: "2",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767627503647-sk63qpcu.jpg",
              imageAlt: "Chief Technology Officer"
            },
            {
              id: "3",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767627504256-2zsjrg7x.jpg",
              imageAlt: "Product Director"
            },
            {
              id: "4",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767627505082-cwxpwyed.jpg",
              imageAlt: "Lead Designer"
            },
            {
              id: "5",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767627505690-364pp3n6.jpg",
              imageAlt: "Senior Developer"
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="testimonials" data-section="testimonials">
        <TestimonialCardThirteen
          title="What Our Clients Say"
          description="Industry leaders and innovative companies trust TechVision for their technology needs."
          tag="Success Stories"
          tagIcon={Award}
          showRating={true}
          carouselMode="buttons"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          testimonials={[
            {
              id: "1",
              name: "Sarah Mitchell",
              handle: "@sarahm",
              testimonial: "TechVision transformed our entire infrastructure. Their team's expertise and dedication delivered results beyond our expectations. Highly recommended!",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767627487885-g2salkec.jpg",
              imageAlt: "Sarah Mitchell"
            },
            {
              id: "2",
              name: "David Chen",
              handle: "@davidchen",
              testimonial: "The AI solutions they implemented increased our efficiency by 40%. Exceptional technical knowledge and seamless integration process.",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767627488412-t0jwewy5.jpg",
              imageAlt: "David Chen"
            },
            {
              id: "3",
              name: "Emily Rodriguez",
              handle: "@emilyrod",
              testimonial: "Working with TechVision was a game-changer for our startup. They understood our vision and delivered scalable solutions that grow with us.",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767627489148-7gx6lila.jpg",
              imageAlt: "Emily Rodriguez"
            },
            {
              id: "4",
              name: "Michael Wong",
              handle: "@michaelw",
              testimonial: "Outstanding service and technical excellence. Their team went above and beyond to ensure our project's success. Five stars all the way!",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767627489831-tnb35ad5.jpg",
              imageAlt: "Michael Wong"
            },
            {
              id: "5",
              name: "Jessica Lee",
              handle: "@jessical",
              testimonial: "The most professional development team we've worked with. Their attention to detail and problem-solving abilities are unmatched in the industry.",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767627490588-kdazsb3m.jpg",
              imageAlt: "Jessica Lee"
            },
            {
              id: "6",
              name: "James Anderson",
              handle: "@jamesand",
              testimonial: "TechVision delivered a comprehensive solution that exceeded all expectations. Their commitment to excellence is evident in every interaction.",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767627491732-vz8qqap4.jpg",
              imageAlt: "James Anderson"
            }
          ]}
        />
      </div>
      
      <div id="faq" data-section="faq">
        <FaqSplitText
          sideTitle="Frequently Asked Questions"
          sideDescription="Get answers to common questions about our services and how we can help your business grow."
          textPosition="left"
          useInvertedBackground="noInvert"
          animationType="smooth"
          faqs={[
            {
              id: "1",
              title: "What industries do you serve?",
              content: "We work with businesses across fintech, healthcare, e-commerce, SaaS, and enterprise sectors. Our expertise spans multiple industries, enabling us to understand your unique challenges and deliver tailored solutions."
            },
            {
              id: "2",
              title: "How long does a typical project take?",
              content: "Project timelines vary based on scope and complexity. Most projects range from 3-12 months. We'll provide a detailed timeline during our initial consultation and maintain transparent communication throughout development."
            },
            {
              id: "3",
              title: "Do you provide ongoing support?",
              content: "Absolutely. We offer comprehensive support packages including maintenance, updates, monitoring, and optimization. Our dedicated support team is available to ensure your systems run smoothly."
            },
            {
              id: "4",
              title: "What technologies do you use?",
              content: "We leverage modern tech stacks including React, Node.js, Python, AWS, and cloud-native technologies. Our approach is technology-agnostic, selecting the best tools for your specific requirements."
            },
            {
              id: "5",
              title: "How do you ensure code quality?",
              content: "We follow industry best practices including rigorous code reviews, automated testing, continuous integration, and quality assurance protocols. Every deliverable meets enterprise-grade standards."
            },
            {
              id: "6",
              title: "Can you work with our existing team?",
              content: "Yes! We excel at augmenting existing teams and collaborating with your engineers. We can integrate seamlessly into your development workflow and work within your established processes."
            }
          ]}
        />
      </div>
      
      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to transform your business with cutting-edge technology? Let's discuss how TechVision can drive your digital innovation forward."
          animationType="entrance-slide"
          buttons={[
            {
              text: "Schedule Consultation",
              href: "mailto:hello@techvision.io"
            },
            {
              text: "View Portfolio",
              href: "#testimonials"
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="footer" data-section="footer">
        <FooterSplit
          logoText="TechVision"
          title="Transforming Ideas Into Intelligent Solutions"
          columns={[
            {
              title: "Product",
              items: [
                {
                  label: "Features",
                  href: "#features"
                },
                {
                  label: "Solutions",
                  href: "#features"
                },
                {
                  label: "Case Studies",
                  href: "#testimonials"
                }
              ]
            },
            {
              title: "Company",
              items: [
                {
                  label: "About Us",
                  href: "#about"
                },
                {
                  label: "Team",
                  href: "#team"
                },
                {
                  label: "Careers",
                  href: "#contact"
                }
              ]
            },
            {
              title: "Resources",
              items: [
                {
                  label: "Blog",
                  href: "#blog"
                },
                {
                  label: "Documentation",
                  href: "#docs"
                },
                {
                  label: "FAQ",
                  href: "#faq"
                }
              ]
            },
            {
              title: "Legal",
              items: [
                {
                  label: "Privacy Policy",
                  href: "#privacy"
                },
                {
                  label: "Terms of Service",
                  href: "#terms"
                },
                {
                  label: "Contact",
                  href: "#contact"
                }
              ]
            }
          ]}
          contactItems={[
            {
              icon: Mail,
              text: "hello@techvision.io"
            },
            {
              icon: Phone,
              text: "+1 (555) 123-4567"
            },
            {
              icon: MapPin,
              text: "San Francisco, CA 94102"
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}