"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
import TextAbout from '@/components/sections/about/TextAbout';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Zap, Lightbulb, Code, TrendingUp, Users, Star, HelpCircle, Mail, Cpu, Activity, Brain, RefreshCw, CheckCircle, Package, Cloud, Database, Server, Shield, Lock, Linkedin, Globe, Github, Twitter, Rocket } from 'lucide-react';

export default function MainPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="small"
      sizing="mediumLargeSizeMediumTitles"
      background="fluid"
      cardStyle="outline"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          navItems={[
            { name: "Infrastructure", id: "infrastructure" },
            { name: "Performance", id: "performance" },
            { name: "Team", id: "team" },
            { name: "FAQ", id: "faq" },
            { name: "Connect", id: "contact" }
          ]}
          button={{ text: "View Setup", href: "contact" }}
          brandName="AI Setup"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitTestimonial
          title="AI Setup Built for Performance"
          description="Explore the infrastructure, models, and workflows powering intelligent solutions. Transparent technical breakdown of our AI stack."
          tag="Advanced Infrastructure"
          tagIcon={Zap}
          tagAnimation="slide-up"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARDrAb2Tjf15nwHOxqYoZ2uEAf/a-modern-ai-dashboard-with-glowing-neura-1772547071349-187359cb.png"
          imageAlt="AI Dashboard Interface"
          imagePosition="right"
          mediaAnimation="slide-up"
          buttons={[
            { text: "View Setup Details", href: "infrastructure" },
            { text: "Schedule Demo", href: "contact" }
          ]}
          buttonAnimation="slide-up"
          testimonials={[
            {
              name: "Sarah Chen",              handle: "ML Engineer, TechForward",              testimonial: "The transparency in their AI setup is unprecedented. We can actually understand how their models work.",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARDrAb2Tjf15nwHOxqYoZ2uEAf/professional-avatar-of-a-satisfied-clien-1772547068857-ee85f36d.png"
            },
            {
              name: "Marcus Rodriguez",              handle: "CTO, InnovateLabs",              testimonial: "Best-in-class infrastructure. Their GPU setup handles our workloads effortlessly with exceptional performance.",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARDrAb2Tjf15nwHOxqYoZ2uEAf/professional-avatar-of-another-satisfied-1772547071864-bf5c228d.png"
            },
            {
              name: "Elena Kowalski",              handle: "Data Scientist, CloudScience",              testimonial: "Outstanding technical architecture. The performance metrics speak for themselves.",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARDrAb2Tjf15nwHOxqYoZ2uEAf/professional-portrait-of-a-satisfied-cli-1772547070398-778d801c.png"
            }
          ]}
          testimonialRotationInterval={5000}
          useInvertedBackground={false}
          background={{ variant: "fluid" }}
        />
      </div>

      <div id="about" data-section="about">
        <TextAbout
          tag="Our Approach"
          tagIcon={Lightbulb}
          tagAnimation="slide-up"
          title="We build AI infrastructure with complete transparency and technical excellence. Our stack combines cutting-edge GPU computing, advanced model architectures, and optimized inference pipelines to deliver intelligent solutions that actually work."
          useInvertedBackground={false}
          buttons={[
            { text: "Learn Our Tech Stack", href: "infrastructure" },
            { text: "View Case Studies", href: "performance" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="infrastructure" data-section="infrastructure">
        <FeatureBento
          title="Our AI Infrastructure"
          description="State-of-the-art computing resources and model deployment optimized for production performance."
          tag="Technical Stack"
          tagIcon={Code}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          features={[
            {
              title: "GPU Acceleration",              description: "Multi-GPU clusters with advanced distributed computing for parallel model training and inference.",              bentoComponent: "icon-info-cards",              items: [
                { icon: Cpu, label: "TFLOPS", value: "1.4K+" },
                { icon: Zap, label: "Memory", value: "768GB" },
                { icon: Activity, label: "Bandwidth", value: "5.4TB/s" }
              ]
            },
            {
              title: "Model Pipeline",              description: "Advanced transformer models with custom optimization layers for superior performance.",              bentoComponent: "3d-task-list",              items: [
                { icon: Brain, label: "Pre-training", time: "2400h" },
                { icon: RefreshCw, label: "Fine-tuning", time: "480h" },
                { icon: CheckCircle, label: "Optimization", time: "96h" }
              ]
            },
            {
              title: "Data Pipeline",              description: "High-throughput data processing with real-time validation and quality assurance.",              bentoComponent: "animated-bar-chart"
            },
            {
              title: "Integration Ecosystem",              description: "Seamless integration with popular ML frameworks and deployment platforms.",              bentoComponent: "orbiting-icons",              centerIcon: Zap,
              items: [
                { icon: Package, ring: 1 },
                { icon: Cloud, ring: 1 },
                { icon: Database, ring: 2 },
                { icon: Server, ring: 2 },
                { icon: Shield, ring: 3 },
                { icon: Lock, ring: 3 }
              ]
            }
          ]}
          carouselMode="buttons"
          buttons={[
            { text: "Explore Architecture", href: "performance" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="performance" data-section="performance">
        <MetricCardOne
          title="Performance Metrics"
          description="Real-world performance benchmarks demonstrating our infrastructure capabilities."
          tag="By The Numbers"
          tagIcon={TrendingUp}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="depth-3d"
          gridVariant="uniform-all-items-equal"
          metrics={[
            { id: "1", value: "99.97", title: "%", description: "System Uptime", icon: Activity },
            { id: "2", value: "47", title: "ms", description: "Average Inference Latency", icon: Zap },
            { id: "3", value: "1.2M", title: "tokens/s", description: "Throughput Capacity", icon: Rocket },
            { id: "4", value: "15.8", title: "PB", description: "Training Data Processed", icon: Database }
          ]}
          carouselMode="buttons"
          buttons={[
            { text: "View Technical Details", href: "contact" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardTwo
          title="Expert Team"
          description="Experienced AI researchers and infrastructure engineers passionate about building next-generation solutions."
          tag="Meet The Team"
          tagIcon={Users}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          gridVariant="uniform-all-items-equal"
          members={[
            {
              id: "1",              name: "Dr. James Mitchell",              role: "AI Research Lead",              description: "PhD in Machine Learning from MIT. 12+ years developing advanced neural architectures and optimization techniques.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARDrAb2Tjf15nwHOxqYoZ2uEAf/professional-headshot-of-a-tech-savvy-pr-1772547069326-f9494b3e.png",              socialLinks: [
                { icon: Linkedin, url: "https://linkedin.com" },
                { icon: Globe, url: "https://example.com" }
              ]
            },
            {
              id: "2",              name: "Priya Sharma",              role: "Infrastructure Architect",              description: "Former Google Cloud Lead. Expert in distributed systems, GPU optimization, and high-performance computing infrastructure.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARDrAb2Tjf15nwHOxqYoZ2uEAf/professional-headshot-of-another-team-me-1772547069275-026c3558.png",              socialLinks: [
                { icon: Linkedin, url: "https://linkedin.com" },
                { icon: Github, url: "https://github.com" }
              ]
            },
            {
              id: "3",              name: "Alex Chen",              role: "ML Operations Engineer",              description: "Specialized in model deployment, monitoring, and production optimization. Built ML platforms serving millions of requests daily.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARDrAb2Tjf15nwHOxqYoZ2uEAf/professional-headshot-featuring-another--1772547070512-3c67343d.png",              socialLinks: [
                { icon: Linkedin, url: "https://linkedin.com" },
                { icon: Twitter, url: "https://twitter.com" }
              ]
            }
          ]}
          carouselMode="buttons"
          buttons={[
            { text: "Connect With Our Team", href: "contact" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSix
          title="What Our Partners Say"
          description="Real feedback from companies and researchers using our AI infrastructure."
          tag="Testimonials"
          tagIcon={Star}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          speed={40}
          topMarqueeDirection="left"
          testimonials={[
            {
              id: "1",              name: "Sarah Chen",              handle: "@sarahchen - ML Engineer",              testimonial: "The transparency in their AI setup is unprecedented. We can actually understand how their models work and optimize accordingly.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARDrAb2Tjf15nwHOxqYoZ2uEAf/professional-avatar-of-a-satisfied-clien-1772547068857-ee85f36d.png"
            },
            {
              id: "2",              name: "Marcus Rodriguez",              handle: "@mrodriguez - CTO",              testimonial: "Best-in-class infrastructure. Their GPU clusters handle our workloads effortlessly with exceptional performance metrics.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARDrAb2Tjf15nwHOxqYoZ2uEAf/professional-avatar-of-another-satisfied-1772547071864-bf5c228d.png"
            },
            {
              id: "3",              name: "Elena Kowalski",              handle: "@ekowalski - Data Scientist",              testimonial: "Outstanding technical architecture. The performance improvements over our previous setup were immediately noticeable.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARDrAb2Tjf15nwHOxqYoZ2uEAf/professional-portrait-of-a-satisfied-cli-1772547070398-778d801c.png"
            },
            {
              id: "4",              name: "David Park",              handle: "@dpark - Research Director",              testimonial: "Exceptional support team with deep technical expertise. They understand the nuances of production AI deployment.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARDrAb2Tjf15nwHOxqYoZ2uEAf/professional-headshot-of-another-client--1772547070789-9254ce0d.png"
            },
            {
              id: "5",              name: "Lisa Zhang",              handle: "@lzhang - Product Lead",              testimonial: "Reliable and scalable. We've built mission-critical AI applications on their infrastructure without hesitation.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARDrAb2Tjf15nwHOxqYoZ2uEAf/professional-portrait-of-satisfied-custo-1772547069564-fd6e1335.png"
            },
            {
              id: "6",              name: "James O'Brien",              handle: "@jobrien - Engineering Head",              testimonial: "The documentation and API design are phenomenal. Integration was seamless and deployment was instantaneous.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARDrAb2Tjf15nwHOxqYoZ2uEAf/professional-headshot-of-another-client--1772547069728-12f121bd.png"
            }
          ]}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Frequently Asked Questions"
          description="Get answers to common questions about our AI setup, infrastructure, and capabilities."
          tag="Support"
          tagIcon={HelpCircle}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          faqsAnimation="slide-up"
          animationType="smooth"
          faqs={[
            {
              id: "1",              title: "What AI models do you use?",              content: "We leverage state-of-the-art transformer architectures including GPT-based models, vision transformers, and custom fine-tuned variants optimized for specific use cases. All models are continuously updated with latest research innovations."
            },
            {
              id: "2",              title: "How do you ensure data security?",              content: "We implement enterprise-grade security with end-to-end encryption, SOC 2 Type II compliance, regular security audits, and isolated computing environments. All data is encrypted in transit and at rest."
            },
            {
              id: "3",              title: "What's your average API response time?",              content: "Our average inference latency is 47ms with 99.97% uptime. Response times vary based on model complexity and payload size, but we consistently maintain sub-100ms performance."
            },
            {
              id: "4",              title: "Can you handle real-time applications?",              content: "Yes. Our infrastructure supports real-time inference with throughput capacity of 1.2M tokens per second and minimal latency. We're optimized for production workloads of any scale."
            },
            {
              id: "5",              title: "Do you offer custom model training?",              content: "Absolutely. We provide custom model training services with dedicated GPU resources. Our team can help fine-tune models for your specific domain and requirements."
            },
            {
              id: "6",              title: "What deployment options are available?",              content: "We offer cloud API, self-hosted options, edge deployment, and hybrid solutions. Choose the deployment model that best fits your infrastructure requirements and compliance needs."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Get Started"
          title="Connect With Our AI Experts"
          description="Schedule a technical consultation to explore how our AI infrastructure can power your applications. We'll discuss your requirements and customize a solution for your needs."
          tagIcon={Mail}
          tagAnimation="slide-up"
          background={{ variant: "fluid" }}
          useInvertedBackground={false}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARDrAb2Tjf15nwHOxqYoZ2uEAf/modern-contact-and-collaboration-visual--1772547069171-7f8645d4.png"
          imageAlt="Network Connection"
          mediaAnimation="slide-up"
          mediaPosition="right"
          inputPlaceholder="your.email@company.com"
          buttonText="Schedule Demo"
          termsText="We respect your privacy. Unsubscribe at any time."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARDrAb2Tjf15nwHOxqYoZ2uEAf/abstract-tech-inspired-background-with-f-1772547069512-e7f7cec6.png"
          imageAlt="Technology Background"
          logoText="AI Setup"
          copyrightText="© 2025 AI Setup. All rights reserved."
          columns={[
            {
              title: "Product",              items: [
                { label: "Infrastructure", href: "#infrastructure" },
                { label: "Performance", href: "#performance" },
                { label: "Pricing", href: "#" },
                { label: "Documentation", href: "#" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About", href: "#about" },
                { label: "Team", href: "#team" },
                { label: "Blog", href: "#" },
                { label: "Careers", href: "#" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "FAQ", href: "#faq" },
                { label: "Contact", href: "#contact" },
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}
