"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
import SplitAboutCards from '@/components/sections/about/SplitAboutCards';
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterSplit from '@/components/sections/footer/FooterSplit';
import { Calendar, Crown, Phone, Mail, MapPin, Sparkles } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="mediumSmall"
      sizing="mediumSizeLargeTitles"
      background="animatedAurora"
      cardStyle="glass-elevated"
      primaryButtonStyle="flat"
      secondaryButtonStyle="layered"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleMinimal
          brandName="TechFlow"
          button={{
            text: "Get Started",
            href: "contact"
          }}
        />
      </div>
      
      <div id="hero" data-section="hero">
        <HeroCarouselLogo
          logoText="TECHFLOW"
          description="Transform your business with cutting-edge IT solutions designed for growth and innovation"
          buttons={[
            {
              text: "Explore Services",
              href: "about"
            },
            {
              text: "Schedule Demo",
              href: "contact"
            }
          ]}
          slides={[
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766932580251-c0k6s515.jpg",
              imageAlt: "Technology and innovation"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766932581841-3p6iwb6o.jpg",
              imageAlt: "Team collaboration"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766932584315-eyfelrmp.jpg",
              imageAlt: "Software development"
            }
          ]}
          autoplayDelay={5000}
          showDimOverlay={true}
        />
      </div>
      
      <div id="about" data-section="about">
        <SplitAboutCards
          tag="Our Services"
          title="Enterprise IT Solutions"
          description="We deliver comprehensive technology services that empower businesses to scale, innovate, and compete in the digital landscape. Our expert team brings years of experience across cloud infrastructure, cybersecurity, and custom development."
          features={[
            {
              id: "cloud-services",
              title: "Cloud Infrastructure",
              description: "Secure, scalable cloud solutions built on AWS, Azure, and Google Cloud. Optimize costs while maximizing performance and reliability for your mission-critical applications.",
              label: "Enterprise Grade"
            },
            {
              id: "cybersecurity",
              title: "Security & Compliance",
              description: "Comprehensive security audits, threat detection, and compliance management. Protect your digital assets with industry-leading security protocols and 24/7 monitoring.",
              label: "ISO Certified"
            }
          ]}
          buttons={[
            {
              text: "Learn More",
              href: "services"
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="features" data-section="features">
        <FeatureCardNine
          title="Platform Capabilities"
          description="Experience the power of integrated IT solutions"
          tag="Features"
          features={[
            {
              id: 1,
              title: "Real-time Monitoring",
              description: "Comprehensive dashboard providing instant visibility into all your IT systems, performance metrics, and health status with intelligent alerts",
              phoneOne: {
                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766932588317-ip4vvs1f.jpg"
              },
              phoneTwo: {
                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766932589896-qxrs75tr.jpg"
              }
            },
            {
              id: 2,
              title: "Automated Management",
              description: "Streamline IT operations with intelligent automation. Reduce manual tasks, improve efficiency, and focus your team on strategic initiatives",
              phoneOne: {
                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766932588317-ip4vvs1f.jpg"
              },
              phoneTwo: {
                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766932589896-qxrs75tr.jpg"
              }
            }
          ]}
          showStepNumbers={true}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="pricing" data-section="pricing">
        <PricingCardThree
          title="Flexible Service Plans"
          description="Choose the perfect IT solution package for your organization's needs and budget"
          tag="Pricing"
          plans={[
            {
              id: "starter",
              price: "$2,999",
              name: "Startup Plan",
              badge: "Perfect for small teams",
              badgeIcon: Sparkles,
              buttons: [
                {
                  text: "Get Started",
                  href: "contact"
                },
                {
                  text: "Learn More",
                  href: "#"
                }
              ],
              features: [
                "Up to 5 team members",
                "Cloud migration support",
                "24/7 technical support",
                "Monthly security audits",
                "System monitoring"
              ]
            },
            {
              id: "professional",
              price: "$7,999",
              name: "Professional Plan",
              badge: "Most popular",
              badgeIcon: Crown,
              buttons: [
                {
                  text: "Start Free Trial",
                  href: "contact"
                },
                {
                  text: "Chat with Sales",
                  href: "#"
                }
              ],
              features: [
                "Up to 20 team members",
                "Full cloud infrastructure",
                "Priority 24/7 support",
                "Weekly security reviews",
                "Advanced analytics",
                "Disaster recovery planning"
              ]
            },
            {
              id: "enterprise",
              price: "Custom",
              name: "Enterprise Plan",
              buttons: [
                {
                  text: "Contact Sales",
                  href: "contact"
                },
                {
                  text: "Request Demo",
                  href: "#"
                }
              ],
              features: [
                "Unlimited team members",
                "Dedicated infrastructure",
                "24/7 Premium support",
                "Real-time threat response",
                "Custom integrations",
                "Compliance management",
                "Strategic consulting"
              ]
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="metrics" data-section="metrics">
        <MetricCardFourteen
          title="Trusted by leading organizations worldwide. Our commitment to excellence drives measurable results for every client partnership."
          tag="Our Impact"
          metrics={[
            {
              id: "1",
              value: "500+",
              description: "Enterprise clients successfully transformed through our IT solutions and digital strategies"
            },
            {
              id: "2",
              value: "99.99%",
              description: "Uptime guarantee across all managed services and cloud infrastructure platforms"
            },
            {
              id: "3",
              value: "24/7",
              description: "Round-the-clock support ensuring your systems are always monitored and optimized"
            },
            {
              id: "4",
              value: "15+",
              description: "Years of combined experience delivering innovative IT solutions across industries"
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTen
          title="Client Success Stories"
          description="See how leading organizations have transformed their IT infrastructure and operations with our solutions"
          tag="Testimonials"
          testimonials={[
            {
              id: "1",
              title: "Complete cloud transformation",
              quote: "TechFlow's team guided us through a seamless cloud migration that reduced our infrastructure costs by 40% while improving system performance. Their expertise and support were invaluable.",
              name: "Sarah Johnson",
              role: "CTO",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766932591184-c44o2nx3.jpg"
            },
            {
              id: "2",
              title: "Security excellence",
              quote: "We finally have peace of mind with their comprehensive security solutions. The proactive threat detection and compliance management saved us from potential incidents.",
              name: "Michael Chen",
              role: "Chief Information Officer",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766932592411-tvvx8uj4.jpg"
            },
            {
              id: "3",
              title: "Operational efficiency",
              quote: "Their automation solutions cut our manual IT tasks in half. The support team is responsive, knowledgeable, and truly partners with us on success.",
              name: "Emily Rodriguez",
              role: "VP Operations",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766932593351-b6yw6wsz.jpg"
            },
            {
              id: "4",
              title: "Strategic partnership",
              quote: "More than just a vendor, TechFlow is a strategic partner. They understand our business goals and align their solutions accordingly. Highly recommended.",
              name: "David Kim",
              role: "Chief Technology Officer",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766932594997-0mz6ieh3.jpg"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="faq" data-section="faq">
        <FaqDouble
          title="Frequently Asked Questions"
          description="Find answers to common questions about our IT services, implementation process, and support offerings"
          tag="Help"
          faqs={[
            {
              id: "1",
              title: "How long does cloud migration typically take?",
              content: "Cloud migration timelines vary based on your current infrastructure complexity and data volume. Most projects take 2-6 months. We conduct a thorough assessment first to provide accurate estimates and minimize business disruption through phased implementation."
            },
            {
              id: "2",
              title: "What security certifications do you maintain?",
              content: "We maintain ISO 27001, SOC 2 Type II, and compliance certifications for GDPR, HIPAA, and PCI-DSS. Our security protocols are continuously updated to meet industry standards and regulatory requirements."
            },
            {
              id: "3",
              title: "Do you offer 24/7 support?",
              content: "Yes, all our plans include 24/7 technical support. Enterprise clients receive dedicated support teams with guaranteed response times. We also provide proactive monitoring to prevent issues before they occur."
            },
            {
              id: "4",
              title: "Can you integrate with our existing systems?",
              content: "Absolutely. We specialize in integrating new solutions with legacy systems. Our integration team assesses your current infrastructure and develops custom solutions to ensure seamless compatibility and minimal downtime."
            },
            {
              id: "5",
              title: "What is your disaster recovery guarantee?",
              content: "We guarantee 99.99% uptime with comprehensive disaster recovery plans. All data is backed up across geographically distributed data centers with automatic failover capabilities to ensure business continuity."
            },
            {
              id: "6",
              title: "How do you handle compliance requirements?",
              content: "Our compliance team stays updated on all regulatory changes relevant to your industry. We conduct regular audits, provide compliance reporting, and implement controls to meet your specific regulatory obligations."
            }
          ]}
          textboxLayout="default"
          animationType="smooth"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="contact" data-section="contact">
        <ContactFaq
          ctaTitle="Ready to transform your IT infrastructure?"
          ctaDescription="Schedule a free consultation with our experts to discuss your specific needs and discover how we can accelerate your digital transformation."
          ctaButton={{
            text: "Schedule Consultation",
            href: "#contact-form"
          }}
          ctaIcon={Calendar}
          faqs={[
            {
              id: "1",
              title: "What is included in the free consultation?",
              content: "Our consultants will assess your current IT infrastructure, discuss your business goals, identify optimization opportunities, and provide recommendations aligned with your budget and timeline."
            },
            {
              id: "2",
              title: "How quickly can you start implementation?",
              content: "We typically begin within 2 weeks of contract signing. Complex implementations may have longer timelines, which we'll detail in our proposal."
            },
            {
              id: "3",
              title: "Do you provide training for our team?",
              content: "Yes, comprehensive training is included in all our service packages. We provide documentation, live training sessions, and ongoing support to ensure your team can effectively manage the new systems."
            }
          ]}
          useInvertedBackground="noInvert"
          animationType="slide-up"
        />
      </div>
      
      <div id="footer" data-section="footer">
        <FooterSplit
          logoText="TechFlow"
          title="Empowering businesses through intelligent IT solutions and strategic digital transformation"
          columns={[
            {
              title: "Services",
              items: [
                {
                  label: "Cloud Solutions",
                  href: "#services"
                },
                {
                  label: "Cybersecurity",
                  href: "#services"
                },
                {
                  label: "IT Management",
                  href: "#services"
                },
                {
                  label: "Digital Strategy",
                  href: "#services"
                }
              ]
            },
            {
              title: "Company",
              items: [
                {
                  label: "About Us",
                  href: "#about"
                },
                {
                  label: "Team",
                  href: "#team"
                },
                {
                  label: "Blog",
                  href: "#blog"
                },
                {
                  label: "Careers",
                  href: "#careers"
                }
              ]
            },
            {
              title: "Support",
              items: [
                {
                  label: "Documentation",
                  href: "#docs"
                },
                {
                  label: "Contact Support",
                  href: "#contact"
                },
                {
                  label: "FAQ",
                  href: "#faq"
                },
                {
                  label: "Knowledge Base",
                  href: "#kb"
                }
              ]
            },
            {
              title: "Legal",
              items: [
                {
                  label: "Privacy Policy",
                  href: "/privacy"
                },
                {
                  label: "Terms of Service",
                  href: "/terms"
                },
                {
                  label: "Cookie Policy",
                  href: "/cookies"
                },
                {
                  label: "Compliance",
                  href: "#compliance"
                }
              ]
            }
          ]}
          contactItems={[
            {
              icon: Phone,
              text: "+1 (555) 123-4567"
            },
            {
              icon: Mail,
              text: "hello@techflow.com"
            },
            {
              icon: MapPin,
              text: "123 Tech Street, San Francisco, CA 94105"
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}