"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroSplitAvatars from '@/components/sections/hero/HeroSplitAvatars';
import MediaAbout from '@/components/sections/about/MediaAbout';
import FeatureCardEighteen from '@/components/sections/feature/FeatureCardEighteen';
import MetricCardFive from '@/components/sections/metrics/MetricCardFive';
import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
import TestimonialCardEight from '@/components/sections/testimonial/TestimonialCardEight';
import FaqBase from '@/components/sections/faq/FaqBase';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Calendar, Linkedin, Twitter, Github, Globe } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="background-highlight"
      borderRadius="sharp"
      contentWidth="smallMedium"
      sizing="largeSizeMediumTitles"
      background="noiseGradient"
      cardStyle="elevated"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="outline"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="TechVenture"
          navItems={[
            { name: "About", id: "about" },
            { name: "Services", id: "services" },
            { name: "Team", id: "team" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Get Started",
            href: "contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitAvatars
          title="Transform Your Business with Modern IT Solutions"
          description="We deliver cutting-edge technology solutions that empower startups and enterprises to scale faster and smarter."
          tag="Innovation & Excellence"
          avatars={[
            {
              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766663457005-ykkm5fi7.jpg",
              alt: "CEO"
            },
            {
              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766663458645-b1db7wl3.jpg",
              alt: "CTO"
            },
            {
              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766399490259-ptyv09vk.jpg",
              alt: "Project Manager"
            },
            {
              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766659851142-vas3wibh.jpg",
              alt: "Lead Developer"
            }
          ]}
          avatarText="Join 50+ companies trusting us"
          buttons={[
            {
              text: "Start Your Project",
              href: "contact"
            },
            {
              text: "View Our Work",
              href: "services"
            }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766496689882-hqygyxp0.jpg"
          imageAlt="Tech team collaborating"
          imagePosition="right"
        />
      </div>

      <div id="about" data-section="about">
        <MediaAbout
          title="Building Tomorrow's Technology Today"
          description="Since 2020, TechVenture has been at the forefront of digital transformation. Our team of expert developers, architects, and strategists work collaboratively to deliver solutions that not only meet today's needs but anticipate tomorrow's challenges."
          tag="About TechVenture"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766663452081-lui30x0t.jpg"
          imageAlt="Modern tech office environment"
          buttons={[
            {
              text: "Learn More",
              href: "#services"
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardEighteen
          title="Our Core Services"
          description="Comprehensive IT solutions designed to accelerate your business growth"
          tag="Services"
          negativeCard={{
            title: "Traditional Approach",
            items: [
              "Legacy systems",
              "Manual processes",
              "Limited scalability",
              "High maintenance costs"
            ],
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766663455580-sfjypck4.jpg"
          }}
          positiveCard={{
            title: "TechVenture Solutions",
            items: [
              "Modern cloud infrastructure",
              "Automated workflows",
              "Enterprise-scale solutions",
              "Predictable cost model"
            ],
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766663453524-tczr06ng.jpg"
          }}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardFive
          title="Our Impact by Numbers"
          description="Proven results that speak for themselves"
          metrics={[
            {
              id: "1",
              value: "50+",
              description: "Enterprise clients across diverse industries"
            },
            {
              id: "2",
              value: "200K+",
              description: "Lines of code deployed to production"
            },
            {
              id: "3",
              value: "99.9%",
              description: "Average uptime for deployed systems"
            },
            {
              id: "4",
              value: "4 Years",
              description: "Average client partnership duration"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardTwo
          title="Meet Our Leadership"
          description="Experienced professionals driving innovation and excellence"
          members={[
            {
              id: "1",
              name: "Alex Chen",
              role: "Founder & CEO",
              description: "Former VP of Engineering at TechCorp. 15+ years in cloud infrastructure.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766663457005-ykkm5fi7.jpg",
              imageAlt: "Alex Chen, CEO",
              socialLinks: [
                {
                  icon: Linkedin,
                  url: "https://linkedin.com"
                },
                {
                  icon: Twitter,
                  url: "https://twitter.com"
                }
              ]
            },
            {
              id: "2",
              name: "Sarah Mitchell",
              role: "CTO",
              description: "PhD in Computer Science. Led engineering teams at Fortune 500 companies.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766663458645-b1db7wl3.jpg",
              imageAlt: "Sarah Mitchell, CTO",
              socialLinks: [
                {
                  icon: Linkedin,
                  url: "https://linkedin.com"
                },
                {
                  icon: Github,
                  url: "https://github.com"
                }
              ]
            },
            {
              id: "3",
              name: "Marcus Johnson",
              role: "VP Operations",
              description: "Operations expert with 12 years experience scaling tech startups.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766399490259-ptyv09vk.jpg",
              imageAlt: "Marcus Johnson, VP Operations",
              socialLinks: [
                {
                  icon: Linkedin,
                  url: "https://linkedin.com"
                }
              ]
            },
            {
              id: "4",
              name: "Emma Rodriguez",
              role: "Lead Architect",
              description: "Solutions architect specializing in enterprise transformation.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766659851142-vas3wibh.jpg",
              imageAlt: "Emma Rodriguez, Lead Architect",
              socialLinks: [
                {
                  icon: Linkedin,
                  url: "https://linkedin.com"
                },
                {
                  icon: Globe,
                  url: "https://example.com"
                }
              ]
            }
          ]}
          gridVariant="four-items-2x2-equal-grid"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardEight
          title="What Our Clients Say"
          description="Real stories from companies we've transformed"
          testimonials={[
            {
              id: "1",
              name: "James Anderson",
              role: "CTO",
              company: "CloudStart Inc",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766663460269-r425fi47.jpg",
              imageAlt: "James Anderson"
            },
            {
              id: "2",
              name: "Lisa Park",
              role: "CEO",
              company: "DataFlow Systems",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766659849799-pyp0klr1.jpg",
              imageAlt: "Lisa Park"
            },
            {
              id: "3",
              name: "David Kumar",
              role: "VP Engineering",
              company: "SecureNet Solutions",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766659852371-2n8s417u.jpg",
              imageAlt: "David Kumar"
            },
            {
              id: "4",
              name: "Jennifer Walsh",
              role: "Founder",
              company: "InnovateTech Labs",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766399489339-4b0slwhc.jpg",
              imageAlt: "Jennifer Walsh"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqBase
          title="Frequently Asked Questions"
          description="Find answers to common questions about our services"
          faqs={[
            {
              id: "1",
              title: "What industries do you serve?",
              content: "We serve a wide range of industries including fintech, healthcare, e-commerce, and SaaS. Our expertise spans enterprise solutions, startup acceleration, and digital transformation across all sectors."
            },
            {
              id: "2",
              title: "How do you ensure project success?",
              content: "We follow agile methodologies with transparent communication, regular sprints, and continuous feedback loops. Each project is assigned a dedicated project manager and technical lead for seamless coordination."
            },
            {
              id: "3",
              title: "What is your typical engagement model?",
              content: "We offer flexible engagement models including dedicated teams, time-based contracts, and project-based engagements. We can also provide staff augmentation for your existing teams."
            },
            {
              id: "4",
              title: "Do you provide ongoing support?",
              content: "Yes, we offer comprehensive post-launch support including maintenance, monitoring, optimization, and feature enhancements. Support packages are tailored to your specific needs."
            },
            {
              id: "5",
              title: "How long does a typical project take?",
              content: "Project timelines vary based on scope and complexity. Simple projects take 4-8 weeks, while enterprise solutions may take 3-6 months. We provide detailed timelines during the planning phase."
            },
            {
              id: "6",
              title: "What technologies do you specialize in?",
              content: "We specialize in cloud platforms (AWS, Azure, GCP), modern frameworks (React, Node.js, Python), databases, microservices architecture, and DevOps practices."
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactFaq
          ctaTitle="Start Your Transformation"
          ctaDescription="Ready to discuss your project? Let's schedule a consultation to explore how we can drive your success."
          ctaButton={{
            text: "Schedule a Call",
            href: "mailto:hello@techventure.io"
          }}
          ctaIcon={Calendar}
          faqs={[
            {
              id: "1",
              title: "What's the first step?",
              content: "Contact us to schedule a free 30-minute discovery call where we understand your goals, challenges, and requirements."
            },
            {
              id: "2",
              title: "How do you handle confidentiality?",
              content: "We maintain strict confidentiality and can sign NDAs as needed. Your data and intellectual property are fully protected."
            },
            {
              id: "3",
              title: "What's your pricing model?",
              content: "Our pricing is flexible and customized based on your project scope, team size, and timeline. We offer transparent cost estimates upfront."
            }
          ]}
          useInvertedBackground="noInvert"
          animationType="slide-up"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="TechVenture"
          columns={[
            {
              items: [
                {
                  label: "Home",
                  href: "hero"
                },
                {
                  label: "About",
                  href: "about"
                },
                {
                  label: "Services",
                  href: "services"
                }
              ]
            },
            {
              items: [
                {
                  label: "Team",
                  href: "team"
                },
                {
                  label: "Contact",
                  href: "contact"
                },
                {
                  label: "FAQ",
                  href: "faq"
                }
              ]
            },
            {
              items: [
                {
                  label: "Privacy Policy",
                  href: "/"
                },
                {
                  label: "Terms & Conditions",
                  href: "/"
                },
                {
                  label: "Sitemap",
                  href: "/"
                }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}